diff --git a/HISTORY.md b/HISTORY.md
index a4b575dc..4c8558f9 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -21,6 +21,7 @@ http://visjs.org
- When hovering over a node that does not have a title, the title of one of the connected edges that HAS a title is no longer shown.
- Fixed error in repulsion physics model.
- Improved physics handling for smoother network simulation.
+- Fixed infinite loop when an image can not be found and no brokenImage is provided.
### Graph2d
diff --git a/dist/vis.js b/dist/vis.js
index c6de6a40..8717afcd 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -103,13 +103,13 @@ return /******/ (function(modules) { // webpackBootstrap
// Timeline
exports.Timeline = __webpack_require__(18);
- exports.Graph2d = __webpack_require__(41);
+ exports.Graph2d = __webpack_require__(42);
exports.timeline = {
DateUtil: __webpack_require__(24),
- DataStep: __webpack_require__(44),
+ DataStep: __webpack_require__(45),
Range: __webpack_require__(21),
stack: __webpack_require__(28),
- TimeStep: __webpack_require__(50),
+ TimeStep: __webpack_require__(38),
components: {
items: {
@@ -121,15 +121,15 @@ return /******/ (function(modules) { // webpackBootstrap
},
Component: __webpack_require__(23),
- CurrentTime: __webpack_require__(38),
- CustomTime: __webpack_require__(40),
- DataAxis: __webpack_require__(43),
- GraphGroup: __webpack_require__(45),
+ CurrentTime: __webpack_require__(39),
+ CustomTime: __webpack_require__(41),
+ DataAxis: __webpack_require__(44),
+ GraphGroup: __webpack_require__(46),
Group: __webpack_require__(27),
BackgroundGroup: __webpack_require__(31),
ItemSet: __webpack_require__(26),
- Legend: __webpack_require__(49),
- LineGraph: __webpack_require__(42),
+ Legend: __webpack_require__(50),
+ LineGraph: __webpack_require__(43),
TimeAxis: __webpack_require__(37)
}
};
@@ -137,13 +137,13 @@ return /******/ (function(modules) { // webpackBootstrap
// Network
exports.Network = __webpack_require__(51);
exports.network = {
- Edge: __webpack_require__(57),
+ Edge: __webpack_require__(52),
Groups: __webpack_require__(54),
Images: __webpack_require__(55),
- Node: __webpack_require__(56),
- Popup: __webpack_require__(58),
- dotparser: __webpack_require__(52),
- gephiParser: __webpack_require__(53)
+ Node: __webpack_require__(53),
+ Popup: __webpack_require__(56),
+ dotparser: __webpack_require__(57),
+ gephiParser: __webpack_require__(58)
};
// Deprecated since v3.0.0
@@ -9548,8 +9548,8 @@ return /******/ (function(modules) { // webpackBootstrap
var Range = __webpack_require__(21);
var Core = __webpack_require__(25);
var TimeAxis = __webpack_require__(37);
- var CurrentTime = __webpack_require__(38);
- var CustomTime = __webpack_require__(40);
+ var CurrentTime = __webpack_require__(39);
+ var CustomTime = __webpack_require__(41);
var ItemSet = __webpack_require__(26);
/**
@@ -18034,7 +18034,7 @@ return /******/ (function(modules) { // webpackBootstrap
var util = __webpack_require__(1);
var Component = __webpack_require__(23);
- var TimeStep = __webpack_require__(50);
+ var TimeStep = __webpack_require__(38);
var DateUtil = __webpack_require__(24);
var moment = __webpack_require__(2);
@@ -18460,4086 +18460,4086 @@ return /******/ (function(modules) { // webpackBootstrap
/* 38 */
/***/ function(module, exports, __webpack_require__) {
- var util = __webpack_require__(1);
- var Component = __webpack_require__(23);
var moment = __webpack_require__(2);
- var locales = __webpack_require__(39);
+ var DateUtil = __webpack_require__(24);
+ var util = __webpack_require__(1);
/**
- * A current time bar
- * @param {{range: Range, dom: Object, domProps: Object}} body
- * @param {Object} [options] Available parameters:
- * {Boolean} [showCurrentTime]
- * @constructor CurrentTime
- * @extends Component
+ * @constructor TimeStep
+ * The class TimeStep is an iterator for dates. You provide a start date and an
+ * end date. 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 TimeStep 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 CurrentTime (body, options) {
- this.body = body;
+ function TimeStep(start, end, minimumStep, hiddenDates) {
+ // variables
+ this.current = new Date();
+ this._start = new Date();
+ this._end = new Date();
- // default options
- this.defaultOptions = {
- showCurrentTime: true,
+ this.autoScale = true;
+ this.scale = 'day';
+ this.step = 1;
- locales: locales,
- locale: 'en'
- };
- this.options = util.extend({}, this.defaultOptions);
- this.offset = 0;
+ // initialize the range
+ this.setRange(start, end, minimumStep);
- this._create();
+ // hidden Dates options
+ this.switchedDay = false;
+ this.switchedMonth = false;
+ this.switchedYear = false;
+ this.hiddenDates = hiddenDates;
+ if (hiddenDates === undefined) {
+ this.hiddenDates = [];
+ }
- this.setOptions(options);
+ this.format = TimeStep.FORMAT; // default formatting
}
- CurrentTime.prototype = new Component();
-
- /**
- * Create the HTML DOM for the current time bar
- * @private
- */
- CurrentTime.prototype._create = function() {
- var bar = document.createElement('div');
- bar.className = 'currenttime';
- bar.style.position = 'absolute';
- bar.style.top = '0px';
- bar.style.height = '100%';
-
- this.bar = bar;
+ // Time formatting
+ TimeStep.FORMAT = {
+ minorLabels: {
+ millisecond:'SSS',
+ second: 's',
+ minute: 'HH:mm',
+ hour: 'HH:mm',
+ weekday: 'ddd D',
+ day: 'D',
+ month: 'MMM',
+ year: 'YYYY'
+ },
+ majorLabels: {
+ millisecond:'HH:mm:ss',
+ second: 'D MMMM HH:mm',
+ minute: 'ddd D MMMM',
+ hour: 'ddd D MMMM',
+ weekday: 'MMMM YYYY',
+ day: 'MMMM YYYY',
+ month: 'YYYY',
+ year: ''
+ }
};
/**
- * Destroy the CurrentTime bar
+ * Set custom formatting for the minor an major labels of the TimeStep.
+ * Both `minorLabels` and `majorLabels` are an Object with properties:
+ * 'millisecond, 'second, 'minute', 'hour', 'weekday, 'day, 'month, 'year'.
+ * @param {{minorLabels: Object, majorLabels: Object}} format
*/
- CurrentTime.prototype.destroy = function () {
- this.options.showCurrentTime = false;
- this.redraw(); // will remove the bar from the DOM and stop refreshing
-
- this.body = null;
+ TimeStep.prototype.setFormat = function (format) {
+ var defaultFormat = util.deepExtend({}, TimeStep.FORMAT);
+ this.format = util.deepExtend(defaultFormat, format);
};
/**
- * Set options for the component. Options will be merged in current options.
- * @param {Object} options Available parameters:
- * {boolean} [showCurrentTime]
+ * 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 {Date} [start] The start date and time.
+ * @param {Date} [end] The end date and time.
+ * @param {int} [minimumStep] Optional. Minimum step size in milliseconds
*/
- CurrentTime.prototype.setOptions = function(options) {
- if (options) {
- // copy all options that we know
- util.selectiveExtend(['showCurrentTime', 'locale', 'locales'], this.options, options);
+ TimeStep.prototype.setRange = function(start, end, minimumStep) {
+ if (!(start instanceof Date) || !(end instanceof Date)) {
+ throw "No legal start or end date in method setRange";
}
- };
-
- /**
- * Repaint the component
- * @return {boolean} Returns true if the component is resized
- */
- CurrentTime.prototype.redraw = function() {
- if (this.options.showCurrentTime) {
- var parent = this.body.dom.backgroundVertical;
- if (this.bar.parentNode != parent) {
- // attach to the dom
- if (this.bar.parentNode) {
- this.bar.parentNode.removeChild(this.bar);
- }
- parent.appendChild(this.bar);
-
- this.start();
- }
-
- var now = new Date(new Date().valueOf() + this.offset);
- var x = this.body.util.toScreen(now);
- var locale = this.options.locales[this.options.locale];
- var title = locale.current + ' ' + locale.time + ': ' + moment(now).format('dddd, MMMM Do YYYY, H:mm:ss');
- title = title.charAt(0).toUpperCase() + title.substring(1);
+ this._start = (start != undefined) ? new Date(start.valueOf()) : new Date();
+ this._end = (end != undefined) ? new Date(end.valueOf()) : new Date();
- this.bar.style.left = x + 'px';
- this.bar.title = title;
- }
- else {
- // remove the line from the DOM
- if (this.bar.parentNode) {
- this.bar.parentNode.removeChild(this.bar);
- }
- this.stop();
+ if (this.autoScale) {
+ this.setMinimumStep(minimumStep);
}
-
- return false;
};
/**
- * Start auto refreshing the current time bar
+ * Set the range iterator to the start date.
*/
- CurrentTime.prototype.start = function() {
- var me = this;
-
- function update () {
- me.stop();
-
- // determine interval to refresh
- var scale = me.body.range.conversion(me.body.domProps.center.width).scale;
- var interval = 1 / scale / 10;
- if (interval < 30) interval = 30;
- if (interval > 1000) interval = 1000;
-
- me.redraw();
-
- // start a timer to adjust for the new time
- me.currentTimeTimer = setTimeout(update, interval);
- }
-
- update();
+ TimeStep.prototype.first = function() {
+ this.current = new Date(this._start.valueOf());
+ this.roundToMinor();
};
/**
- * Stop auto refreshing the current time bar
+ * Round the current date to the first minor date value
+ * This must be executed once when the current date is set to start Date
*/
- CurrentTime.prototype.stop = function() {
- if (this.currentTimeTimer !== undefined) {
- clearTimeout(this.currentTimeTimer);
- delete this.currentTimeTimer;
+ TimeStep.prototype.roundToMinor = function() {
+ // round to floor
+ // IMPORTANT: we have no breaks in this switch! (this is no bug)
+ // noinspection FallThroughInSwitchStatementJS
+ switch (this.scale) {
+ case 'year':
+ this.current.setFullYear(this.step * Math.floor(this.current.getFullYear() / this.step));
+ this.current.setMonth(0);
+ case 'month': this.current.setDate(1);
+ case 'day': // intentional fall through
+ case 'weekday': this.current.setHours(0);
+ case 'hour': this.current.setMinutes(0);
+ case 'minute': this.current.setSeconds(0);
+ case 'second': this.current.setMilliseconds(0);
+ //case 'millisecond': // nothing to do for milliseconds
+ }
+
+ if (this.step != 1) {
+ // round down to the first minor value that is a multiple of the current step size
+ switch (this.scale) {
+ case 'millisecond': this.current.setMilliseconds(this.current.getMilliseconds() - this.current.getMilliseconds() % this.step); break;
+ case 'second': this.current.setSeconds(this.current.getSeconds() - this.current.getSeconds() % this.step); break;
+ case 'minute': this.current.setMinutes(this.current.getMinutes() - this.current.getMinutes() % this.step); break;
+ case 'hour': this.current.setHours(this.current.getHours() - this.current.getHours() % this.step); break;
+ case 'weekday': // intentional fall through
+ case 'day': this.current.setDate((this.current.getDate()-1) - (this.current.getDate()-1) % this.step + 1); break;
+ case 'month': this.current.setMonth(this.current.getMonth() - this.current.getMonth() % this.step); break;
+ case 'year': this.current.setFullYear(this.current.getFullYear() - this.current.getFullYear() % this.step); break;
+ default: break;
+ }
}
};
/**
- * Set a current time. This can be used for example to ensure that a client's
- * time is synchronized with a shared server time.
- * @param {Date | String | Number} time A Date, unix timestamp, or
- * ISO date string.
+ * Check if the there is a next step
+ * @return {boolean} true if the current date has not passed the end date
*/
- CurrentTime.prototype.setCurrentTime = function(time) {
- var t = util.convert(time, 'Date').valueOf();
- var now = new Date().valueOf();
- this.offset = t - now;
- this.redraw();
+ TimeStep.prototype.hasNext = function () {
+ return (this.current.valueOf() <= this._end.valueOf());
};
/**
- * Get the current time.
- * @return {Date} Returns the current time.
+ * Do the next step
*/
- CurrentTime.prototype.getCurrentTime = function() {
- return new Date(new Date().valueOf() + this.offset);
- };
-
- module.exports = CurrentTime;
-
+ TimeStep.prototype.next = function() {
+ var prev = this.current.valueOf();
-/***/ },
-/* 39 */
-/***/ function(module, exports, __webpack_require__) {
-
- // English
- exports['en'] = {
- current: 'current',
- time: 'time'
- };
- exports['en_EN'] = exports['en'];
- exports['en_US'] = exports['en'];
-
- // Dutch
- exports['nl'] = {
- custom: 'aangepaste',
- time: 'tijd'
- };
- exports['nl_NL'] = exports['nl'];
- exports['nl_BE'] = exports['nl'];
-
-
-/***/ },
-/* 40 */
-/***/ function(module, exports, __webpack_require__) {
-
- var Hammer = __webpack_require__(19);
- var util = __webpack_require__(1);
- var Component = __webpack_require__(23);
- var moment = __webpack_require__(2);
- var locales = __webpack_require__(39);
-
- /**
- * A custom time bar
- * @param {{range: Range, dom: Object}} body
- * @param {Object} [options] Available parameters:
- * {Boolean} [showCustomTime]
- * @constructor CustomTime
- * @extends Component
- */
-
- function CustomTime (body, options) {
- this.body = body;
+ // Two cases, needed to prevent issues with switching daylight savings
+ // (end of March and end of October)
+ if (this.current.getMonth() < 6) {
+ switch (this.scale) {
+ case 'millisecond':
- // default options
- this.defaultOptions = {
- showCustomTime: false,
- locales: locales,
- locale: 'en'
- };
- this.options = util.extend({}, this.defaultOptions);
+ this.current = new Date(this.current.valueOf() + this.step); break;
+ case 'second': this.current = new Date(this.current.valueOf() + this.step * 1000); break;
+ case 'minute': this.current = new Date(this.current.valueOf() + this.step * 1000 * 60); break;
+ case 'hour':
+ this.current = new Date(this.current.valueOf() + this.step * 1000 * 60 * 60);
+ // in case of skipping an hour for daylight savings, adjust the hour again (else you get: 0h 5h 9h ... instead of 0h 4h 8h ...)
+ var h = this.current.getHours();
+ this.current.setHours(h - (h % this.step));
+ break;
+ case 'weekday': // intentional fall through
+ case 'day': this.current.setDate(this.current.getDate() + this.step); break;
+ case 'month': this.current.setMonth(this.current.getMonth() + this.step); break;
+ case 'year': this.current.setFullYear(this.current.getFullYear() + this.step); break;
+ default: break;
+ }
+ }
+ else {
+ switch (this.scale) {
+ case 'millisecond': this.current = new Date(this.current.valueOf() + this.step); break;
+ case 'second': this.current.setSeconds(this.current.getSeconds() + this.step); break;
+ case 'minute': this.current.setMinutes(this.current.getMinutes() + this.step); break;
+ case 'hour': this.current.setHours(this.current.getHours() + this.step); break;
+ case 'weekday': // intentional fall through
+ case 'day': this.current.setDate(this.current.getDate() + this.step); break;
+ case 'month': this.current.setMonth(this.current.getMonth() + this.step); break;
+ case 'year': this.current.setFullYear(this.current.getFullYear() + this.step); break;
+ default: break;
+ }
+ }
- this.customTime = new Date();
- this.eventParams = {}; // stores state parameters while dragging the bar
+ if (this.step != 1) {
+ // round down to the correct major value
+ switch (this.scale) {
+ case 'millisecond': if(this.current.getMilliseconds() < this.step) this.current.setMilliseconds(0); break;
+ case 'second': if(this.current.getSeconds() < this.step) this.current.setSeconds(0); break;
+ case 'minute': if(this.current.getMinutes() < this.step) this.current.setMinutes(0); break;
+ case 'hour': if(this.current.getHours() < this.step) this.current.setHours(0); break;
+ case 'weekday': // intentional fall through
+ case 'day': if(this.current.getDate() < this.step+1) this.current.setDate(1); break;
+ case 'month': if(this.current.getMonth() < this.step) this.current.setMonth(0); break;
+ case 'year': break; // nothing to do for year
+ default: break;
+ }
+ }
- // create the DOM
- this._create();
+ // safety mechanism: if current time is still unchanged, move to the end
+ if (this.current.valueOf() == prev) {
+ this.current = new Date(this._end.valueOf());
+ }
- this.setOptions(options);
- }
+ DateUtil.stepOverHiddenDates(this, prev);
+ };
- CustomTime.prototype = new Component();
/**
- * Set options for the component. Options will be merged in current options.
- * @param {Object} options Available parameters:
- * {boolean} [showCustomTime]
+ * Get the current datetime
+ * @return {Date} current The current date
*/
- CustomTime.prototype.setOptions = function(options) {
- if (options) {
- // copy all options that we know
- util.selectiveExtend(['showCustomTime', 'locale', 'locales'], this.options, options);
- }
+ TimeStep.prototype.getCurrent = function() {
+ return this.current;
};
/**
- * Create the DOM for the custom time
- * @private
+ * Set a custom scale. Autoscaling will be disabled.
+ * For example setScale(SCALE.MINUTES, 5) will result
+ * in minor steps of 5 minutes, and major steps of an hour.
+ *
+ * @param {string} newScale
+ * A scale. Choose from 'millisecond, 'second,
+ * 'minute', 'hour', 'weekday, 'day, 'month, 'year'.
+ * @param {Number} newStep A step size, by default 1. Choose for
+ * example 1, 2, 5, or 10.
*/
- CustomTime.prototype._create = function() {
- var bar = document.createElement('div');
- bar.className = 'customtime';
- bar.style.position = 'absolute';
- bar.style.top = '0px';
- bar.style.height = '100%';
- this.bar = bar;
+ TimeStep.prototype.setScale = function(newScale, newStep) {
+ this.scale = newScale;
- var drag = document.createElement('div');
- drag.style.position = 'relative';
- drag.style.top = '0px';
- drag.style.left = '-10px';
- drag.style.height = '100%';
- drag.style.width = '20px';
- bar.appendChild(drag);
+ if (newStep > 0) {
+ this.step = newStep;
+ }
- // attach event listeners
- this.hammer = Hammer(bar, {
- prevent_default: true
- });
- this.hammer.on('dragstart', this._onDragStart.bind(this));
- this.hammer.on('drag', this._onDrag.bind(this));
- this.hammer.on('dragend', this._onDragEnd.bind(this));
+ this.autoScale = false;
};
/**
- * Destroy the CustomTime bar
+ * Enable or disable autoscaling
+ * @param {boolean} enable If true, autoascaling is set true
*/
- CustomTime.prototype.destroy = function () {
- this.options.showCustomTime = false;
- this.redraw(); // will remove the bar from the DOM
-
- this.hammer.enable(false);
- this.hammer = null;
-
- this.body = null;
+ TimeStep.prototype.setAutoScale = function (enable) {
+ this.autoScale = enable;
};
+
/**
- * Repaint the component
- * @return {boolean} Returns true if the component is resized
+ * Automatically determine the scale that bests fits the provided minimum step
+ * @param {Number} [minimumStep] The minimum step size in milliseconds
*/
- CustomTime.prototype.redraw = function () {
- if (this.options.showCustomTime) {
- var parent = this.body.dom.backgroundVertical;
- if (this.bar.parentNode != parent) {
- // attach to the dom
- if (this.bar.parentNode) {
- this.bar.parentNode.removeChild(this.bar);
- }
- parent.appendChild(this.bar);
- }
-
- var x = this.body.util.toScreen(this.customTime);
+ TimeStep.prototype.setMinimumStep = function(minimumStep) {
+ if (minimumStep == undefined) {
+ return;
+ }
- var locale = this.options.locales[this.options.locale];
- var title = locale.time + ': ' + moment(this.customTime).format('dddd, MMMM Do YYYY, H:mm:ss');
- title = title.charAt(0).toUpperCase() + title.substring(1);
+ //var b = asc + ds;
- this.bar.style.left = x + 'px';
- this.bar.title = title;
- }
- else {
- // remove the line from the DOM
- if (this.bar.parentNode) {
- this.bar.parentNode.removeChild(this.bar);
- }
- }
+ var stepYear = (1000 * 60 * 60 * 24 * 30 * 12);
+ var stepMonth = (1000 * 60 * 60 * 24 * 30);
+ var stepDay = (1000 * 60 * 60 * 24);
+ var stepHour = (1000 * 60 * 60);
+ var stepMinute = (1000 * 60);
+ var stepSecond = (1000);
+ var stepMillisecond= (1);
- return false;
+ // find the smallest step that is larger than the provided minimumStep
+ if (stepYear*1000 > minimumStep) {this.scale = 'year'; this.step = 1000;}
+ if (stepYear*500 > minimumStep) {this.scale = 'year'; this.step = 500;}
+ if (stepYear*100 > minimumStep) {this.scale = 'year'; this.step = 100;}
+ if (stepYear*50 > minimumStep) {this.scale = 'year'; this.step = 50;}
+ if (stepYear*10 > minimumStep) {this.scale = 'year'; this.step = 10;}
+ if (stepYear*5 > minimumStep) {this.scale = 'year'; this.step = 5;}
+ if (stepYear > minimumStep) {this.scale = 'year'; this.step = 1;}
+ if (stepMonth*3 > minimumStep) {this.scale = 'month'; this.step = 3;}
+ if (stepMonth > minimumStep) {this.scale = 'month'; this.step = 1;}
+ if (stepDay*5 > minimumStep) {this.scale = 'day'; this.step = 5;}
+ if (stepDay*2 > minimumStep) {this.scale = 'day'; this.step = 2;}
+ if (stepDay > minimumStep) {this.scale = 'day'; this.step = 1;}
+ if (stepDay/2 > minimumStep) {this.scale = 'weekday'; this.step = 1;}
+ if (stepHour*4 > minimumStep) {this.scale = 'hour'; this.step = 4;}
+ if (stepHour > minimumStep) {this.scale = 'hour'; this.step = 1;}
+ if (stepMinute*15 > minimumStep) {this.scale = 'minute'; this.step = 15;}
+ if (stepMinute*10 > minimumStep) {this.scale = 'minute'; this.step = 10;}
+ if (stepMinute*5 > minimumStep) {this.scale = 'minute'; this.step = 5;}
+ if (stepMinute > minimumStep) {this.scale = 'minute'; this.step = 1;}
+ if (stepSecond*15 > minimumStep) {this.scale = 'second'; this.step = 15;}
+ if (stepSecond*10 > minimumStep) {this.scale = 'second'; this.step = 10;}
+ if (stepSecond*5 > minimumStep) {this.scale = 'second'; this.step = 5;}
+ if (stepSecond > minimumStep) {this.scale = 'second'; this.step = 1;}
+ if (stepMillisecond*200 > minimumStep) {this.scale = 'millisecond'; this.step = 200;}
+ if (stepMillisecond*100 > minimumStep) {this.scale = 'millisecond'; this.step = 100;}
+ if (stepMillisecond*50 > minimumStep) {this.scale = 'millisecond'; this.step = 50;}
+ if (stepMillisecond*10 > minimumStep) {this.scale = 'millisecond'; this.step = 10;}
+ if (stepMillisecond*5 > minimumStep) {this.scale = 'millisecond'; this.step = 5;}
+ if (stepMillisecond > minimumStep) {this.scale = 'millisecond'; this.step = 1;}
};
/**
- * Set custom time.
- * @param {Date | number | string} time
+ * 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
*/
- CustomTime.prototype.setCustomTime = function(time) {
- this.customTime = util.convert(time, 'Date');
- this.redraw();
- };
+ TimeStep.prototype.snap = function(date) {
+ var clone = new Date(date.valueOf());
- /**
- * Retrieve the current custom time.
- * @return {Date} customTime
- */
- CustomTime.prototype.getCustomTime = function() {
- return new Date(this.customTime.valueOf());
+ if (this.scale == 'year') {
+ var year = clone.getFullYear() + Math.round(clone.getMonth() / 12);
+ clone.setFullYear(Math.round(year / this.step) * this.step);
+ clone.setMonth(0);
+ clone.setDate(0);
+ clone.setHours(0);
+ clone.setMinutes(0);
+ clone.setSeconds(0);
+ clone.setMilliseconds(0);
+ }
+ else if (this.scale == 'month') {
+ if (clone.getDate() > 15) {
+ clone.setDate(1);
+ clone.setMonth(clone.getMonth() + 1);
+ // important: first set Date to 1, after that change the month.
+ }
+ else {
+ clone.setDate(1);
+ }
+
+ clone.setHours(0);
+ clone.setMinutes(0);
+ clone.setSeconds(0);
+ clone.setMilliseconds(0);
+ }
+ else if (this.scale == 'day') {
+ //noinspection FallthroughInSwitchStatementJS
+ switch (this.step) {
+ case 5:
+ case 2:
+ clone.setHours(Math.round(clone.getHours() / 24) * 24); break;
+ default:
+ clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
+ }
+ clone.setMinutes(0);
+ clone.setSeconds(0);
+ clone.setMilliseconds(0);
+ }
+ else if (this.scale == 'weekday') {
+ //noinspection FallthroughInSwitchStatementJS
+ switch (this.step) {
+ case 5:
+ case 2:
+ clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
+ default:
+ clone.setHours(Math.round(clone.getHours() / 6) * 6); break;
+ }
+ clone.setMinutes(0);
+ clone.setSeconds(0);
+ clone.setMilliseconds(0);
+ }
+ else if (this.scale == 'hour') {
+ switch (this.step) {
+ case 4:
+ clone.setMinutes(Math.round(clone.getMinutes() / 60) * 60); break;
+ default:
+ clone.setMinutes(Math.round(clone.getMinutes() / 30) * 30); break;
+ }
+ clone.setSeconds(0);
+ clone.setMilliseconds(0);
+ } else if (this.scale == 'minute') {
+ //noinspection FallthroughInSwitchStatementJS
+ switch (this.step) {
+ case 15:
+ case 10:
+ clone.setMinutes(Math.round(clone.getMinutes() / 5) * 5);
+ clone.setSeconds(0);
+ break;
+ case 5:
+ clone.setSeconds(Math.round(clone.getSeconds() / 60) * 60); break;
+ default:
+ clone.setSeconds(Math.round(clone.getSeconds() / 30) * 30); break;
+ }
+ clone.setMilliseconds(0);
+ }
+ else if (this.scale == 'second') {
+ //noinspection FallthroughInSwitchStatementJS
+ switch (this.step) {
+ case 15:
+ case 10:
+ clone.setSeconds(Math.round(clone.getSeconds() / 5) * 5);
+ clone.setMilliseconds(0);
+ break;
+ case 5:
+ clone.setMilliseconds(Math.round(clone.getMilliseconds() / 1000) * 1000); break;
+ default:
+ clone.setMilliseconds(Math.round(clone.getMilliseconds() / 500) * 500); break;
+ }
+ }
+ else if (this.scale == 'millisecond') {
+ var step = this.step > 5 ? this.step / 2 : 1;
+ clone.setMilliseconds(Math.round(clone.getMilliseconds() / step) * step);
+ }
+
+ return clone;
};
/**
- * Start moving horizontally
- * @param {Event} event
- * @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.
*/
- CustomTime.prototype._onDragStart = function(event) {
- this.eventParams.dragging = true;
- this.eventParams.customTime = this.customTime;
+ TimeStep.prototype.isMajor = function() {
+ if (this.switchedYear == true) {
+ this.switchedYear = false;
+ switch (this.scale) {
+ case 'year':
+ case 'month':
+ case 'weekday':
+ case 'day':
+ case 'hour':
+ case 'minute':
+ case 'second':
+ case 'millisecond':
+ return true;
+ default:
+ return false;
+ }
+ }
+ else if (this.switchedMonth == true) {
+ this.switchedMonth = false;
+ switch (this.scale) {
+ case 'weekday':
+ case 'day':
+ case 'hour':
+ case 'minute':
+ case 'second':
+ case 'millisecond':
+ return true;
+ default:
+ return false;
+ }
+ }
+ else if (this.switchedDay == true) {
+ this.switchedDay = false;
+ switch (this.scale) {
+ case 'millisecond':
+ case 'second':
+ case 'minute':
+ case 'hour':
+ return true;
+ default:
+ return false;
+ }
+ }
- event.stopPropagation();
- event.preventDefault();
+ switch (this.scale) {
+ case 'millisecond':
+ return (this.current.getMilliseconds() == 0);
+ case 'second':
+ return (this.current.getSeconds() == 0);
+ case 'minute':
+ return (this.current.getHours() == 0) && (this.current.getMinutes() == 0);
+ case 'hour':
+ return (this.current.getHours() == 0);
+ case 'weekday': // intentional fall through
+ case 'day':
+ return (this.current.getDate() == 1);
+ case 'month':
+ return (this.current.getMonth() == 0);
+ case 'year':
+ return false;
+ default:
+ return false;
+ }
};
+
/**
- * Perform moving operating.
- * @param {Event} event
- * @private
+ * Returns formatted text for the minor axislabel, depending on the current
+ * date and the scale. For example when scale is MINUTE, the current time is
+ * formatted as "hh:mm".
+ * @param {Date} [date] custom date. if not provided, current date is taken
*/
- CustomTime.prototype._onDrag = function (event) {
- if (!this.eventParams.dragging) return;
-
- var deltaX = event.gesture.deltaX,
- x = this.body.util.toScreen(this.eventParams.customTime) + deltaX,
- time = this.body.util.toTime(x);
-
- this.setCustomTime(time);
-
- // fire a timechange event
- this.body.emitter.emit('timechange', {
- time: new Date(this.customTime.valueOf())
- });
+ TimeStep.prototype.getLabelMinor = function(date) {
+ if (date == undefined) {
+ date = this.current;
+ }
- event.stopPropagation();
- event.preventDefault();
+ var format = this.format.minorLabels[this.scale];
+ return (format && format.length > 0) ? moment(date).format(format) : '';
};
/**
- * Stop moving operating.
- * @param {event} event
- * @private
+ * Returns formatted text for the major axis label, depending on the current
+ * date and the scale. For example when scale is MINUTE, the major scale is
+ * hours, and the hour will be formatted as "hh".
+ * @param {Date} [date] custom date. if not provided, current date is taken
*/
- CustomTime.prototype._onDragEnd = function (event) {
- if (!this.eventParams.dragging) return;
-
- // fire a timechanged event
- this.body.emitter.emit('timechanged', {
- time: new Date(this.customTime.valueOf())
- });
+ TimeStep.prototype.getLabelMajor = function(date) {
+ if (date == undefined) {
+ date = this.current;
+ }
- event.stopPropagation();
- event.preventDefault();
+ var format = this.format.majorLabels[this.scale];
+ return (format && format.length > 0) ? moment(date).format(format) : '';
};
- module.exports = CustomTime;
+ module.exports = TimeStep;
/***/ },
-/* 41 */
+/* 39 */
/***/ function(module, exports, __webpack_require__) {
- var Emitter = __webpack_require__(11);
- var Hammer = __webpack_require__(19);
var util = __webpack_require__(1);
- var DataSet = __webpack_require__(7);
- var DataView = __webpack_require__(9);
- var Range = __webpack_require__(21);
- var Core = __webpack_require__(25);
- var TimeAxis = __webpack_require__(37);
- var CurrentTime = __webpack_require__(38);
- var CustomTime = __webpack_require__(40);
- var LineGraph = __webpack_require__(42);
+ var Component = __webpack_require__(23);
+ var moment = __webpack_require__(2);
+ var locales = __webpack_require__(40);
/**
- * 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
+ * A current time bar
+ * @param {{range: Range, dom: Object, domProps: Object}} body
+ * @param {Object} [options] Available parameters:
+ * {Boolean} [showCurrentTime]
+ * @constructor CurrentTime
+ * @extends Component
*/
- 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;
- }
+ function CurrentTime (body, options) {
+ this.body = body;
- var me = this;
+ // default options
this.defaultOptions = {
- start: null,
- end: null,
-
- autoResize: true,
+ showCurrentTime: true,
- orientation: 'bottom',
- width: null,
- height: null,
- maxHeight: null,
- minHeight: null
+ locales: locales,
+ locale: 'en'
};
- this.options = util.deepExtend({}, this.defaultOptions);
-
- // Create the DOM, props, and emitter
- this._create(container);
-
- // all components listed here will be repainted automatically
- this.components = [];
+ this.options = util.extend({}, this.defaultOptions);
+ this.offset = 0;
- this.body = {
- dom: this.dom,
- domProps: this.props,
- emitter: {
- on: this.on.bind(this),
- off: this.off.bind(this),
- emit: this.emit.bind(this)
- },
- hiddenDates: [],
- 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._create();
- // range
- this.range = new Range(this.body);
- this.components.push(this.range);
- this.body.range = this.range;
+ this.setOptions(options);
+ }
- // time axis
- this.timeAxis = new TimeAxis(this.body);
- this.components.push(this.timeAxis);
- this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
+ CurrentTime.prototype = new Component();
- // current time bar
- this.currentTime = new CurrentTime(this.body);
- this.components.push(this.currentTime);
+ /**
+ * Create the HTML DOM for the current time bar
+ * @private
+ */
+ CurrentTime.prototype._create = function() {
+ var bar = document.createElement('div');
+ bar.className = 'currenttime';
+ bar.style.position = 'absolute';
+ bar.style.top = '0px';
+ bar.style.height = '100%';
- // 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.bar = bar;
+ };
- // item set
- this.linegraph = new LineGraph(this.body);
- this.components.push(this.linegraph);
+ /**
+ * Destroy the CurrentTime bar
+ */
+ CurrentTime.prototype.destroy = function () {
+ this.options.showCurrentTime = false;
+ this.redraw(); // will remove the bar from the DOM and stop refreshing
- this.itemsData = null; // DataSet
- this.groupsData = null; // DataSet
+ this.body = null;
+ };
- // apply options
+ /**
+ * Set options for the component. Options will be merged in current options.
+ * @param {Object} options Available parameters:
+ * {boolean} [showCurrentTime]
+ */
+ CurrentTime.prototype.setOptions = function(options) {
if (options) {
- this.setOptions(options);
+ // copy all options that we know
+ util.selectiveExtend(['showCurrentTime', 'locale', 'locales'], this.options, options);
}
+ };
- // IMPORTANT: THIS HAPPENS BEFORE SET ITEMS!
- if (groups) {
- this.setGroups(groups);
- }
+ /**
+ * Repaint the component
+ * @return {boolean} Returns true if the component is resized
+ */
+ CurrentTime.prototype.redraw = function() {
+ if (this.options.showCurrentTime) {
+ var parent = this.body.dom.backgroundVertical;
+ if (this.bar.parentNode != parent) {
+ // attach to the dom
+ if (this.bar.parentNode) {
+ this.bar.parentNode.removeChild(this.bar);
+ }
+ parent.appendChild(this.bar);
- // create itemset
- if (items) {
- this.setItems(items);
+ this.start();
+ }
+
+ var now = new Date(new Date().valueOf() + this.offset);
+ var x = this.body.util.toScreen(now);
+
+ var locale = this.options.locales[this.options.locale];
+ var title = locale.current + ' ' + locale.time + ': ' + moment(now).format('dddd, MMMM Do YYYY, H:mm:ss');
+ title = title.charAt(0).toUpperCase() + title.substring(1);
+
+ this.bar.style.left = x + 'px';
+ this.bar.title = title;
}
else {
- this.redraw();
+ // remove the line from the DOM
+ if (this.bar.parentNode) {
+ this.bar.parentNode.removeChild(this.bar);
+ }
+ this.stop();
}
- }
- // Extend the functionality from Core
- Graph2d.prototype = new Core();
+ return false;
+ };
/**
- * Set items
- * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
+ * Start auto refreshing the current time bar
*/
- Graph2d.prototype.setItems = function(items) {
- var initialLoad = (this.itemsData == null);
+ CurrentTime.prototype.start = function() {
+ var me = this;
- // 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'
- }
- });
- }
+ function update () {
+ me.stop();
- // set items
- this.itemsData = newDataSet;
- this.linegraph && this.linegraph.setItems(newDataSet);
+ // determine interval to refresh
+ var scale = me.body.range.conversion(me.body.domProps.center.width).scale;
+ var interval = 1 / scale / 10;
+ if (interval < 30) interval = 30;
+ if (interval > 1000) interval = 1000;
- 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;
+ me.redraw();
- this.setWindow(start, end, {animate: false});
- }
- else {
- this.fit({animate: false});
- }
+ // start a timer to adjust for the new time
+ me.currentTimeTimer = setTimeout(update, interval);
}
+
+ update();
};
/**
- * Set groups
- * @param {vis.DataSet | Array | google.visualization.DataTable} groups
+ * Stop auto refreshing the current time bar
*/
- 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;
- }
- else {
- // turn an array into a dataset
- newDataSet = new DataSet(groups);
+ CurrentTime.prototype.stop = function() {
+ if (this.currentTimeTimer !== undefined) {
+ clearTimeout(this.currentTimeTimer);
+ delete this.currentTimeTimer;
}
-
- this.groupsData = newDataSet;
- this.linegraph.setGroups(newDataSet);
};
/**
- * 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
+ * Set a current time. This can be used for example to ensure that a client's
+ * time is synchronized with a shared server time.
+ * @param {Date | String | Number} time A Date, unix timestamp, or
+ * ISO date string.
*/
- 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;
- }
- }
+ CurrentTime.prototype.setCurrentTime = function(time) {
+ var t = util.convert(time, 'Date').valueOf();
+ var now = new Date().valueOf();
+ this.offset = t - now;
+ this.redraw();
+ };
/**
- * This checks if the visible option of the supplied group (by ID) is true or false.
- * @param groupId
- * @returns {*}
+ * Get the current time.
+ * @return {Date} Returns the current time.
*/
- 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;
- }
- }
+ CurrentTime.prototype.getCurrentTime = function() {
+ return new Date(new Date().valueOf() + this.offset);
+ };
+ module.exports = CurrentTime;
- /**
- * Get the data range of the item set.
- * @returns {{min: Date, max: Date}} range A range with a start and end Date.
- * When no minimum is found, min==null
- * When no maximum is found, max==null
- */
- Graph2d.prototype.getItemRange = function() {
- 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;
- }
- }
- }
- }
+/***/ },
+/* 40 */
+/***/ function(module, exports, __webpack_require__) {
- return {
- min: (min != null) ? new Date(min) : null,
- max: (max != null) ? new Date(max) : null
- };
+ // English
+ exports['en'] = {
+ current: 'current',
+ time: 'time'
};
+ exports['en_EN'] = exports['en'];
+ exports['en_US'] = exports['en'];
-
-
- module.exports = Graph2d;
+ // Dutch
+ exports['nl'] = {
+ custom: 'aangepaste',
+ time: 'tijd'
+ };
+ exports['nl_NL'] = exports['nl'];
+ exports['nl_BE'] = exports['nl'];
/***/ },
-/* 42 */
+/* 41 */
/***/ function(module, exports, __webpack_require__) {
+ var Hammer = __webpack_require__(19);
var util = __webpack_require__(1);
- var DOMutil = __webpack_require__(6);
- var DataSet = __webpack_require__(7);
- var DataView = __webpack_require__(9);
var Component = __webpack_require__(23);
- var DataAxis = __webpack_require__(43);
- var GraphGroup = __webpack_require__(45);
- var Legend = __webpack_require__(49);
- var BarGraphFunctions = __webpack_require__(48);
-
- var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
+ var moment = __webpack_require__(2);
+ var locales = __webpack_require__(40);
/**
- * This is the constructor of the LineGraph. It requires a Timeline body and options.
- *
- * @param body
- * @param options
- * @constructor
+ * A custom time bar
+ * @param {{range: Range, dom: Object}} body
+ * @param {Object} [options] Available parameters:
+ * {Boolean} [showCustomTime]
+ * @constructor CustomTime
+ * @extends Component
*/
- function LineGraph(body, options) {
- this.id = util.randomUUID();
+
+ function CustomTime (body, options) {
this.body = body;
+ // default options
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,
- alignZeros: true,
- customRange: {
- left: {min:undefined, max:undefined},
- right: {min:undefined, max:undefined}
- }
- //, these options are not set by default, but this shows the format they will be in
- //format: {
- // left: {decimals: 2},
- // right: {decimals: 2}
- //},
- //title: {
- // left: {
- // text: 'left',
- // style: 'color:black;'
- // },
- // right: {
- // text: 'right',
- // style: 'color:black;'
- // }
- //}
- },
- 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: {}
- }
+ showCustomTime: false,
+ locales: locales,
+ locale: 'en'
};
-
- // 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;
- this.updateSVGheight = false;
-
- var me = this;
- this.itemsData = null; // DataSet
- this.groupsData = null; // DataSet
-
- // 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);
- }
- };
-
- // 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);
- }
- };
-
- 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
- this.svgElements = {};
- this.setOptions(options);
- this.groupsUsingDefaultStyles = [0];
- this.COUNTER = 0;
- this.body.emitter.on('rangechanged', function() {
- me.lastStart = me.body.range.start;
- me.svg.style.left = util.option.asSize(-me.props.width);
- me.redraw.call(me,true);
- });
+ this.customTime = new Date();
+ this.eventParams = {}; // stores state parameters while dragging the bar
- // create the HTML DOM
+ // create the DOM
this._create();
- this.framework = {svg: this.svg, svgElements: this.svgElements, options: this.options, groups: this.groups};
- this.body.emitter.emit('change');
+ this.setOptions(options);
}
- LineGraph.prototype = new Component();
+ CustomTime.prototype = new Component();
/**
- * Create the HTML DOM for the ItemSet
+ * Set options for the component. Options will be merged in current options.
+ * @param {Object} options Available parameters:
+ * {boolean} [showCustomTime]
*/
- LineGraph.prototype._create = function(){
- var frame = document.createElement('div');
- frame.className = 'LineGraph';
- this.dom.frame = frame;
-
- // 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);
-
- // data axis
- this.options.dataAxis.orientation = 'left';
- this.yAxisLeft = new DataAxis(this.body, this.options.dataAxis, this.svg, this.options.groups);
+ CustomTime.prototype.setOptions = function(options) {
+ if (options) {
+ // copy all options that we know
+ util.selectiveExtend(['showCustomTime', 'locale', 'locales'], this.options, options);
+ }
+ };
- this.options.dataAxis.orientation = 'right';
- this.yAxisRight = new DataAxis(this.body, this.options.dataAxis, this.svg, this.options.groups);
- delete this.options.dataAxis.orientation;
+ /**
+ * Create the DOM for the custom time
+ * @private
+ */
+ CustomTime.prototype._create = function() {
+ var bar = document.createElement('div');
+ bar.className = 'customtime';
+ bar.style.position = 'absolute';
+ bar.style.top = '0px';
+ bar.style.height = '100%';
+ this.bar = bar;
- // 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);
+ var drag = document.createElement('div');
+ drag.style.position = 'relative';
+ drag.style.top = '0px';
+ drag.style.left = '-10px';
+ drag.style.height = '100%';
+ drag.style.width = '20px';
+ bar.appendChild(drag);
- this.show();
+ // attach event listeners
+ this.hammer = Hammer(bar, {
+ prevent_default: true
+ });
+ this.hammer.on('dragstart', this._onDragStart.bind(this));
+ this.hammer.on('drag', this._onDrag.bind(this));
+ this.hammer.on('dragend', this._onDragEnd.bind(this));
};
/**
- * set the options of the LineGraph. the mergeOptions is used for subObjects that have an enabled element.
- * @param {object} options
+ * Destroy the CustomTime bar
*/
- LineGraph.prototype.setOptions = function(options) {
- if (options) {
- var fields = ['sampling','defaultGroup','height','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort','groups'];
- if (options.graphHeight === undefined && options.height !== undefined && this.body.domProps.centerContainer.height !== undefined) {
- this.updateSVGheight = true;
- }
- else if (this.body.domProps.centerContainer.height !== undefined && options.graphHeight !== undefined) {
- if (parseInt((options.graphHeight + '').replace("px",'')) < this.body.domProps.centerContainer.height) {
- this.updateSVGheight = true;
- }
- }
- 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');
+ CustomTime.prototype.destroy = function () {
+ this.options.showCustomTime = false;
+ this.redraw(); // will remove the bar from the DOM
- 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;
- }
- }
- }
- }
+ this.hammer.enable(false);
+ this.hammer = null;
- if (this.yAxisLeft) {
- if (options.dataAxis !== undefined) {
- this.yAxisLeft.setOptions(this.options.dataAxis);
- this.yAxisRight.setOptions(this.options.dataAxis);
- }
- }
+ this.body = null;
+ };
- if (this.legendLeft) {
- if (options.legend !== undefined) {
- this.legendLeft.setOptions(this.options.legend);
- this.legendRight.setOptions(this.options.legend);
+ /**
+ * Repaint the component
+ * @return {boolean} Returns true if the component is resized
+ */
+ CustomTime.prototype.redraw = function () {
+ if (this.options.showCustomTime) {
+ var parent = this.body.dom.backgroundVertical;
+ if (this.bar.parentNode != parent) {
+ // attach to the dom
+ if (this.bar.parentNode) {
+ this.bar.parentNode.removeChild(this.bar);
}
+ parent.appendChild(this.bar);
}
- if (this.groups.hasOwnProperty(UNGROUPED)) {
- this.groups[UNGROUPED].setOptions(options);
+ var x = this.body.util.toScreen(this.customTime);
+
+ var locale = this.options.locales[this.options.locale];
+ var title = locale.time + ': ' + moment(this.customTime).format('dddd, MMMM Do YYYY, H:mm:ss');
+ title = title.charAt(0).toUpperCase() + title.substring(1);
+
+ this.bar.style.left = x + 'px';
+ this.bar.title = title;
+ }
+ else {
+ // remove the line from the DOM
+ if (this.bar.parentNode) {
+ this.bar.parentNode.removeChild(this.bar);
}
}
- // this is used to redraw the graph if the visibility of the groups is changed.
- if (this.dom.frame) {
- this.redraw(true);
- }
+ return false;
};
/**
- * Hide the component from the DOM
+ * Set custom time.
+ * @param {Date | number | string} time
*/
- LineGraph.prototype.hide = function() {
- // remove the frame containing the items
- if (this.dom.frame.parentNode) {
- this.dom.frame.parentNode.removeChild(this.dom.frame);
- }
+ CustomTime.prototype.setCustomTime = function(time) {
+ this.customTime = util.convert(time, 'Date');
+ this.redraw();
};
-
/**
- * Show the component in the DOM (when not already visible).
- * @return {Boolean} changed
+ * Retrieve the current custom time.
+ * @return {Date} customTime
*/
- LineGraph.prototype.show = function() {
- // show frame containing the items
- if (!this.dom.frame.parentNode) {
- this.body.dom.center.appendChild(this.dom.frame);
- }
+ CustomTime.prototype.getCustomTime = function() {
+ return new Date(this.customTime.valueOf());
};
-
/**
- * Set items
- * @param {vis.DataSet | null} items
+ * Start moving horizontally
+ * @param {Event} event
+ * @private
*/
- 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');
- }
-
- if (oldItemsData) {
- // unsubscribe from old dataset
- util.forEach(this.itemListeners, function (callback, event) {
- oldItemsData.off(event, callback);
- });
-
- // remove all drawn items
- ids = oldItemsData.getIds();
- this._onRemove(ids);
- }
-
- if (this.itemsData) {
- // subscribe to new dataset
- var id = this.id;
- util.forEach(this.itemListeners, function (callback, event) {
- me.itemsData.on(event, callback, id);
- });
+ CustomTime.prototype._onDragStart = function(event) {
+ this.eventParams.dragging = true;
+ this.eventParams.customTime = this.customTime;
- // add all new items
- ids = this.itemsData.getIds();
- this._onAdd(ids);
- }
- this._updateUngrouped();
- //this._updateGraph();
- this.redraw(true);
+ event.stopPropagation();
+ event.preventDefault();
};
-
/**
- * Set groups
- * @param {vis.DataSet} groups
+ * Perform moving operating.
+ * @param {Event} event
+ * @private
*/
- LineGraph.prototype.setGroups = function(groups) {
- var me = this;
- var ids;
-
- // unsubscribe from current dataset
- if (this.groupsData) {
- util.forEach(this.groupListeners, function (callback, event) {
- me.groupsData.unsubscribe(event, callback);
- });
+ CustomTime.prototype._onDrag = function (event) {
+ if (!this.eventParams.dragging) return;
- // remove all drawn groups
- ids = this.groupsData.getIds();
- this.groupsData = null;
- this._onRemoveGroups(ids); // note: this will cause a redraw
- }
+ var deltaX = event.gesture.deltaX,
+ x = this.body.util.toScreen(this.eventParams.customTime) + deltaX,
+ time = this.body.util.toTime(x);
- // replace the dataset
- if (!groups) {
- this.groupsData = null;
- }
- 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.setCustomTime(time);
- if (this.groupsData) {
- // subscribe to new dataset
- var id = this.id;
- util.forEach(this.groupListeners, function (callback, event) {
- me.groupsData.on(event, callback, id);
- });
+ // fire a timechange event
+ this.body.emitter.emit('timechange', {
+ time: new Date(this.customTime.valueOf())
+ });
- // draw all ms
- ids = this.groupsData.getIds();
- this._onAddGroups(ids);
- }
- this._onUpdate();
+ event.stopPropagation();
+ event.preventDefault();
};
-
/**
- * Update the data
- * @param [ids]
+ * Stop moving operating.
+ * @param {event} event
* @private
*/
- LineGraph.prototype._onUpdate = function(ids) {
- this._updateUngrouped();
- this._updateAllGroupData();
- //this._updateGraph();
- this.redraw(true);
- };
- 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]);
- }
+ CustomTime.prototype._onDragEnd = function (event) {
+ if (!this.eventParams.dragging) return;
- //this._updateGraph();
- this.redraw(true);
+ // fire a timechanged event
+ this.body.emitter.emit('timechanged', {
+ time: new Date(this.customTime.valueOf())
+ });
+
+ event.stopPropagation();
+ event.preventDefault();
};
- LineGraph.prototype._onAddGroups = function (groupIds) {this._onUpdateGroups(groupIds);};
+ module.exports = CustomTime;
+
+
+/***/ },
+/* 42 */
+/***/ function(module, exports, __webpack_require__) {
+
+ var Emitter = __webpack_require__(11);
+ var Hammer = __webpack_require__(19);
+ var util = __webpack_require__(1);
+ var DataSet = __webpack_require__(7);
+ var DataView = __webpack_require__(9);
+ var Range = __webpack_require__(21);
+ var Core = __webpack_require__(25);
+ var TimeAxis = __webpack_require__(37);
+ var CurrentTime = __webpack_require__(39);
+ var CustomTime = __webpack_require__(41);
+ var LineGraph = __webpack_require__(43);
/**
- * this cleans the group out off the legends and the dataaxis, updates the ungrouped and updates the graph
- * @param {Array} groupIds
- * @private
+ * 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
*/
- 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]];
- }
+ 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;
}
- this._updateUngrouped();
- //this._updateGraph();
- this.redraw(true);
- };
+ var me = this;
+ this.defaultOptions = {
+ start: null,
+ end: null,
- /**
- * update a group object with the group dataset entree
- *
- * @param group
- * @param groupId
- * @private
- */
- 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]);
+ autoResize: true,
+
+ orientation: 'bottom',
+ width: null,
+ height: null,
+ maxHeight: null,
+ minHeight: null
+ };
+ this.options = util.deepExtend({}, this.defaultOptions);
+
+ // Create the DOM, props, and emitter
+ this._create(container);
+
+ // all components listed here will be repainted automatically
+ this.components = [];
+
+ this.body = {
+ dom: this.dom,
+ domProps: this.props,
+ emitter: {
+ on: this.on.bind(this),
+ off: this.off.bind(this),
+ emit: this.emit.bind(this)
+ },
+ hiddenDates: [],
+ 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)
}
+ };
+
+ // range
+ this.range = new Range(this.body);
+ this.components.push(this.range);
+ this.body.range = this.range;
+
+ // time axis
+ this.timeAxis = new TimeAxis(this.body);
+ this.components.push(this.timeAxis);
+ this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
+
+ // current time bar
+ this.currentTime = new CurrentTime(this.body);
+ this.components.push(this.currentTime);
+
+ // custom time bar
+ // Note: time bar will be attached in this.setOptions when selected
+ this.customTime = new CustomTime(this.body);
+ this.components.push(this.customTime);
+
+ // item set
+ this.linegraph = new LineGraph(this.body);
+ this.components.push(this.linegraph);
+
+ this.itemsData = null; // DataSet
+ this.groupsData = null; // DataSet
+
+ // apply options
+ if (options) {
+ this.setOptions(options);
+ }
+
+ // IMPORTANT: THIS HAPPENS BEFORE SET ITEMS!
+ if (groups) {
+ this.setGroups(groups);
+ }
+
+ // create itemset
+ if (items) {
+ this.setItems(items);
}
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.redraw();
}
- this.legendLeft.redraw();
- this.legendRight.redraw();
- };
+ }
+ // Extend the functionality from Core
+ Graph2d.prototype = new Core();
/**
- * this updates all groups, it is used when there is an update the the itemset.
- *
- * @private
+ * Set items
+ * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
*/
- 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];
- if (groupsContent[item.group] === undefined) {
- throw new Error('Cannot find referenced group. Possible reason: items added before groups? Groups need to be added before items, as items refer to groups.')
- }
- 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]);
+ 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'
}
- }
+ });
}
- };
+ // set items
+ this.itemsData = newDataSet;
+ this.linegraph && this.linegraph.setItems(newDataSet);
- /**
- * 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;
- }
- }
- else {
- item.group = UNGROUPED;
- }
- ungroupedCounter = item.group == UNGROUPED ? ungroupedCounter + 1 : ungroupedCounter;
- }
- }
- }
+ 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;
- if (ungroupedCounter == 0) {
- delete this.groups[UNGROUPED];
- this.legendLeft.removeGroup(UNGROUPED);
- this.legendRight.removeGroup(UNGROUPED);
- this.yAxisLeft.removeGroup(UNGROUPED);
- this.yAxisRight.removeGroup(UNGROUPED);
+ this.setWindow(start, end, {animate: false});
}
else {
- var group = {id: UNGROUPED, content: this.options.defaultGroup};
- this._updateGroup(group, UNGROUPED);
+ this.fit({animate: false});
}
}
+ };
+
+ /**
+ * Set groups
+ * @param {vis.DataSet | Array | google.visualization.DataTable} groups
+ */
+ 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;
+ }
else {
- delete this.groups[UNGROUPED];
- this.legendLeft.removeGroup(UNGROUPED);
- this.legendRight.removeGroup(UNGROUPED);
- this.yAxisLeft.removeGroup(UNGROUPED);
- this.yAxisRight.removeGroup(UNGROUPED);
+ // turn an array into a dataset
+ newDataSet = new DataSet(groups);
}
- this.legendLeft.redraw();
- this.legendRight.redraw();
+ this.groupsData = newDataSet;
+ this.linegraph.setGroups(newDataSet);
};
-
/**
- * Redraw the component, mandatory function
- * @return {boolean} Returns true if the component is resized
+ * 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
*/
- LineGraph.prototype.redraw = function(forceGraphUpdate) {
- var resized = false;
-
- // calculate actual size and position
- this.props.width = this.dom.frame.offsetWidth;
- this.props.height = this.body.domProps.centerContainer.height;
-
- // update the graph if there is no lastWidth or with, used for the initial draw
- if (this.lastWidth === undefined && this.props.width) {
- forceGraphUpdate = 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.lastVisibleInterval = visibleInterval;
-
-
- // 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.props.width);
- this.svg.style.left = util.option.asSize(-this.props.width);
-
- // if the height of the graph is set as proportional, change the height of the svg
- if ((this.options.height + '').indexOf("%") != -1) {
- this.updateSVGheight = true;
- }
- }
-
- // update the height of the graph on each redraw of the graph.
- if (this.updateSVGheight == true) {
- if (this.options.graphHeight != this.body.domProps.centerContainer.height + 'px') {
- this.options.graphHeight = this.body.domProps.centerContainer.height + 'px';
- this.svg.style.height = this.body.domProps.centerContainer.height + 'px';
- }
- this.updateSVGheight = false;
+ 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 {
- this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
+ return "cannot find group:" + groupId;
}
+ }
- // zoomed is here to ensure that animations are shown correctly.
- if (resized == true || zoomed == true || this.abortedGraphUpdate == true || forceGraphUpdate == true) {
- resized = this._updateGraph() || resized;
+ /**
+ * This checks if the visible option of the supplied group (by ID) is true or false.
+ * @param groupId
+ * @returns {*}
+ */
+ 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 {
- // 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.props.width != 0) {
- var rangePerPixelInv = this.props.width/range;
- var xOffset = offset * rangePerPixelInv;
- this.svg.style.left = (-this.props.width - xOffset) + 'px';
- }
- }
+ return false;
}
-
- this.legendLeft.redraw();
- this.legendRight.redraw();
- return resized;
- };
+ }
/**
- * Update and redraw the graph.
- *
+ * 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
*/
- LineGraph.prototype._updateGraph = function () {
- // reset the svg elements
- DOMutil.prepareElements(this.svgElements);
- if (this.props.width != 0 && this.itemsData != null) {
- var group, i;
- var preprocessedGroupData = {};
- var processedGroupData = {};
- var groupRanges = {};
- var changeCalled = false;
+ Graph2d.prototype.getItemRange = function() {
+ var min = null;
+ var max = null;
- // 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);
+ // 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;
}
}
}
- 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 only loads the data we require based on the timewindow
- this._getRelevantData(groupIds, groupsData, minDate, maxDate);
-
- // apply sampling, if disabled, it will pass through this function.
- this._applySampling(groupIds, groupsData);
-
- // 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);
+ return {
+ min: (min != null) ? new Date(min) : null,
+ max: (max != null) ? new Date(max) : null
+ };
+ };
- // 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);
- var MAX_CYCLES = 5;
- if (changeCalled == true && this.COUNTER < MAX_CYCLES) {
- DOMutil.cleanupElements(this.svgElements);
- this.abortedGraphUpdate = true;
- this.COUNTER++;
- this.body.emitter.emit('change');
- return true;
- }
- else {
- if (this.COUNTER > MAX_CYCLES) {
- console.log("WARNING: there may be an infinite loop in the _updateGraph emitter cycle.")
- }
- this.COUNTER = 0;
- this.abortedGraphUpdate = false;
- // 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);
- }
- // draw the groups
- for (i = 0; i < groupIds.length; i++) {
- group = this.groups[groupIds[i]];
- if (group.options.style != 'bar') { // bar needs to be drawn enmasse
- group.draw(processedGroupData[groupIds[i]], group, this.framework);
- }
- }
- BarGraphFunctions.draw(groupIds, processedGroupData, this.framework);
- }
- }
- }
+ module.exports = Graph2d;
- // cleanup unused svg elements
- DOMutil.cleanupElements(this.svgElements);
- return false;
- };
+/***/ },
+/* 43 */
+/***/ function(module, exports, __webpack_require__) {
- /**
- * 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.
- *
- * @param {array} groupIds
- * @param {object} groupsData
- * @param {date} minDate
- * @param {date} maxDate
- * @private
- */
- LineGraph.prototype._getRelevantData = function (groupIds, groupsData, minDate, maxDate) {
- 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.binarySearchValue(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);
- }
- }
- }
- }
- }
- }
- };
+ var util = __webpack_require__(1);
+ var DOMutil = __webpack_require__(6);
+ var DataSet = __webpack_require__(7);
+ var DataView = __webpack_require__(9);
+ var Component = __webpack_require__(23);
+ var DataAxis = __webpack_require__(44);
+ var GraphGroup = __webpack_require__(46);
+ var Legend = __webpack_require__(50);
+ var BarGraphFunctions = __webpack_require__(49);
+ var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
/**
+ * This is the constructor of the LineGraph. It requires a Timeline body and options.
*
- * @param groupIds
- * @param groupsData
- * @private
+ * @param body
+ * @param options
+ * @constructor
*/
- 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;
+ function LineGraph(body, options) {
+ this.id = util.randomUUID();
+ this.body = body;
- // 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)));
+ 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,
+ alignZeros: true,
+ customRange: {
+ left: {min:undefined, max:undefined},
+ right: {min:undefined, max:undefined}
+ }
+ //, these options are not set by default, but this shows the format they will be in
+ //format: {
+ // left: {decimals: 2},
+ // right: {decimals: 2}
+ //},
+ //title: {
+ // left: {
+ // text: 'left',
+ // style: 'color:black;'
+ // },
+ // right: {
+ // text: 'right',
+ // style: 'color:black;'
+ // }
+ //}
+ },
+ 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: {}
+ }
+ };
- var sampledData = [];
- for (var j = 0; j < amountOfPoints; j += increment) {
- sampledData.push(dataContainer[j]);
+ // 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;
+ this.updateSVGheight = false;
- }
- groupsData[groupIds[i]] = sampledData;
- }
- }
+ var me = this;
+ this.itemsData = null; // DataSet
+ this.groupsData = null; // DataSet
+
+ // 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);
}
- }
- };
+ };
+
+ // 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);
+ }
+ };
+
+ 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
+
+ this.svgElements = {};
+ this.setOptions(options);
+ this.groupsUsingDefaultStyles = [0];
+ this.COUNTER = 0;
+ this.body.emitter.on('rangechanged', function() {
+ me.lastStart = me.body.range.start;
+ me.svg.style.left = util.option.asSize(-me.props.width);
+ me.redraw.call(me,true);
+ });
+
+ // create the HTML DOM
+ this._create();
+ this.framework = {svg: this.svg, svgElements: this.svgElements, options: this.options, groups: this.groups};
+ this.body.emitter.emit('change');
+
+ }
+ LineGraph.prototype = new Component();
/**
- *
- *
- * @param {array} groupIds
- * @param {object} groupsData
- * @param {object} groupRanges | this is being filled here
- * @private
+ * Create the HTML DOM for the ItemSet
*/
- LineGraph.prototype._getYRanges = function (groupIds, groupsData, groupRanges) {
- var groupData, group, i;
- var barCombinedDataLeft = [];
- var barCombinedDataRight = [];
- var options;
- if (groupIds.length > 0) {
- for (i = 0; i < groupIds.length; i++) {
- groupData = groupsData[groupIds[i]];
- options = this.groups[groupIds[i]].options;
- if (groupData.length > 0) {
- group = this.groups[groupIds[i]];
- // if bar graphs are stacked, their range need to be handled differently and accumulated over all groups.
- if (options.barChart.handleOverlap == 'stack' && options.style == 'bar') {
- if (options.yAxisOrientation == 'left') {barCombinedDataLeft = barCombinedDataLeft.concat(group.getYRange(groupData)) ;}
- else {barCombinedDataRight = barCombinedDataRight.concat(group.getYRange(groupData));}
- }
- else {
- groupRanges[groupIds[i]] = group.getYRange(groupData,groupIds[i]);
- }
- }
- }
+ LineGraph.prototype._create = function(){
+ var frame = document.createElement('div');
+ frame.className = 'LineGraph';
+ this.dom.frame = frame;
- // if bar graphs are stacked, their range need to be handled differently and accumulated over all groups.
- BarGraphFunctions.getStackedBarYRange(barCombinedDataLeft , groupRanges, groupIds, '__barchartLeft' , 'left' );
- BarGraphFunctions.getStackedBarYRange(barCombinedDataRight, groupRanges, groupIds, '__barchartRight', 'right');
- }
- };
+ // 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);
+
+ // data axis
+ this.options.dataAxis.orientation = 'left';
+ this.yAxisLeft = new DataAxis(this.body, this.options.dataAxis, this.svg, this.options.groups);
+
+ this.options.dataAxis.orientation = 'right';
+ this.yAxisRight = new DataAxis(this.body, this.options.dataAxis, this.svg, this.options.groups);
+ delete this.options.dataAxis.orientation;
+ // 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();
+ };
/**
- * 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
+ * set the options of the LineGraph. the mergeOptions is used for subObjects that have an enabled element.
+ * @param {object} options
*/
- LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
- var resized = 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) {
- // this is here to make sure that if there are no items in the axis but there are groups, that there is no infinite draw/redraw loop.
- for (var i = 0; i < groupIds.length; i++) {
- var group = this.groups[groupIds[i]];
- if (group && group.options.yAxisOrientation == 'left') {
- yAxisLeftUsed = true;
- minLeft = 0;
- maxLeft = 0;
- }
- else {
- yAxisRightUsed = true;
- minRight = 0;
- maxRight = 0;
+ LineGraph.prototype.setOptions = function(options) {
+ if (options) {
+ var fields = ['sampling','defaultGroup','height','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort','groups'];
+ if (options.graphHeight === undefined && options.height !== undefined && this.body.domProps.centerContainer.height !== undefined) {
+ this.updateSVGheight = true;
+ }
+ else if (this.body.domProps.centerContainer.height !== undefined && options.graphHeight !== undefined) {
+ if (parseInt((options.graphHeight + '').replace("px",'')) < this.body.domProps.centerContainer.height) {
+ this.updateSVGheight = true;
}
}
+ 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');
- // if there are items:
- 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;
-
- if (groupRanges[groupIds[i]].yAxisOrientation == 'left') {
- yAxisLeftUsed = true;
- minLeft = minLeft > minVal ? minVal : minLeft;
- maxLeft = maxLeft < maxVal ? maxVal : maxLeft;
+ 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 {
- yAxisRightUsed = true;
- minRight = minRight > minVal ? minVal : minRight;
- maxRight = maxRight < maxVal ? maxVal : maxRight;
+ this.options.catmullRom.parametrization = 'centripetal';
+ this.options.catmullRom.alpha = 0.5;
}
}
}
}
- if (yAxisLeftUsed == true) {
- this.yAxisLeft.setRange(minLeft, maxLeft);
- }
- if (yAxisRightUsed == true) {
- this.yAxisRight.setRange(minRight, maxRight);
+ if (this.yAxisLeft) {
+ if (options.dataAxis !== undefined) {
+ this.yAxisLeft.setOptions(this.options.dataAxis);
+ this.yAxisRight.setOptions(this.options.dataAxis);
+ }
}
- }
- resized = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft) || resized;
- resized = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || resized;
- if (yAxisRightUsed == true && yAxisLeftUsed == true) {
- this.yAxisLeft.drawIcons = true;
- this.yAxisRight.drawIcons = true;
- }
- else {
- this.yAxisLeft.drawIcons = false;
- this.yAxisRight.drawIcons = false;
- }
- this.yAxisRight.master = !yAxisLeftUsed;
- if (this.yAxisRight.master == false) {
- if (yAxisRightUsed == true) {this.yAxisLeft.lineOffset = this.yAxisRight.width;}
- else {this.yAxisLeft.lineOffset = 0;}
+ if (this.legendLeft) {
+ if (options.legend !== undefined) {
+ this.legendLeft.setOptions(this.options.legend);
+ this.legendRight.setOptions(this.options.legend);
+ }
+ }
- resized = this.yAxisLeft.redraw() || resized;
- this.yAxisRight.stepPixelsForced = this.yAxisLeft.stepPixels;
- this.yAxisRight.zeroCrossing = this.yAxisLeft.zeroCrossing;
- resized = this.yAxisRight.redraw() || resized;
- }
- else {
- resized = this.yAxisRight.redraw() || resized;
+ if (this.groups.hasOwnProperty(UNGROUPED)) {
+ this.groups[UNGROUPED].setOptions(options);
+ }
}
- // 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 is used to redraw the graph if the visibility of the groups is changed.
+ if (this.dom.frame) {
+ this.redraw(true);
}
+ };
- return resized;
+ /**
+ * Hide the component from the DOM
+ */
+ LineGraph.prototype.hide = function() {
+ // remove the frame containing the items
+ if (this.dom.frame.parentNode) {
+ this.dom.frame.parentNode.removeChild(this.dom.frame);
+ }
};
/**
- * 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
+ * Show the component in the DOM (when not already visible).
+ * @return {Boolean} changed
*/
- LineGraph.prototype._toggleAxisVisiblity = function (axisUsed, axis) {
- var changed = false;
- if (axisUsed == false) {
- if (axis.dom.frame.parentNode && axis.hidden == false) {
- axis.hide()
- changed = true;
- }
- }
- else {
- if (!axis.dom.frame.parentNode && axis.hidden == true) {
- axis.show();
- changed = true;
- }
+ LineGraph.prototype.show = function() {
+ // show frame containing the items
+ if (!this.dom.frame.parentNode) {
+ this.body.dom.center.appendChild(this.dom.frame);
}
- return changed;
};
/**
- * 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
+ * Set items
+ * @param {vis.DataSet | null} items
*/
- LineGraph.prototype._convertXcoordinates = function (datapoints) {
- var extractedData = [];
- var xValue, yValue;
- var toScreen = this.body.util.toScreen;
+ LineGraph.prototype.setItems = function(items) {
+ var me = this,
+ ids,
+ oldItemsData = this.itemsData;
- for (var i = 0; i < datapoints.length; i++) {
- xValue = toScreen(datapoints[i].x) + this.props.width;
- yValue = datapoints[i].y;
- extractedData.push({x: xValue, y: yValue});
+ // 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');
}
- return extractedData;
+ if (oldItemsData) {
+ // unsubscribe from old dataset
+ util.forEach(this.itemListeners, function (callback, event) {
+ oldItemsData.off(event, callback);
+ });
+
+ // remove all drawn items
+ ids = oldItemsData.getIds();
+ this._onRemove(ids);
+ }
+
+ 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(true);
};
/**
- * 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
- * @param group
- * @returns {Array}
- * @private
+ * Set groups
+ * @param {vis.DataSet} groups
*/
- 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;
+ LineGraph.prototype.setGroups = function(groups) {
+ var me = this;
+ var ids;
+
+ // unsubscribe from current dataset
+ if (this.groupsData) {
+ util.forEach(this.groupListeners, function (callback, event) {
+ me.groupsData.unsubscribe(event, callback);
+ });
+
+ // remove all drawn groups
+ ids = this.groupsData.getIds();
+ this.groupsData = null;
+ this._onRemoveGroups(ids); // note: this will cause a redraw
}
- for (var i = 0; i < datapoints.length; i++) {
- xValue = toScreen(datapoints[i].x) + this.props.width;
- yValue = Math.round(axis.convertValue(datapoints[i].y));
- extractedData.push({x: xValue, y: yValue});
+ // replace the dataset
+ if (!groups) {
+ this.groupsData = null;
+ }
+ else if (groups instanceof DataSet || groups instanceof DataView) {
+ this.groupsData = groups;
+ }
+ else {
+ throw new TypeError('Data must be an instance of DataSet or DataView');
}
- group.setZeroPosition(Math.min(svgHeight, axis.convertValue(0)));
+ if (this.groupsData) {
+ // subscribe to new dataset
+ var id = this.id;
+ util.forEach(this.groupListeners, function (callback, event) {
+ me.groupsData.on(event, callback, id);
+ });
- return extractedData;
+ // draw all ms
+ ids = this.groupsData.getIds();
+ this._onAddGroups(ids);
+ }
+ this._onUpdate();
};
- module.exports = LineGraph;
-
+ /**
+ * Update the data
+ * @param [ids]
+ * @private
+ */
+ LineGraph.prototype._onUpdate = function(ids) {
+ this._updateUngrouped();
+ this._updateAllGroupData();
+ //this._updateGraph();
+ this.redraw(true);
+ };
+ 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]);
+ }
-/***/ },
-/* 43 */
-/***/ function(module, exports, __webpack_require__) {
+ //this._updateGraph();
+ this.redraw(true);
+ };
+ LineGraph.prototype._onAddGroups = function (groupIds) {this._onUpdateGroups(groupIds);};
- var util = __webpack_require__(1);
- var DOMutil = __webpack_require__(6);
- var Component = __webpack_require__(23);
- var DataStep = __webpack_require__(44);
/**
- * A horizontal time axis
- * @param {Object} [options] See DataAxis.setOptions for the available
- * options.
- * @constructor DataAxis
- * @extends Component
- * @param body
+ * this cleans the group out off the legends and the dataaxis, updates the ungrouped and updates the graph
+ * @param {Array} groupIds
+ * @private
*/
- function DataAxis (body, options, svg, linegraphOptions) {
- this.id = util.randomUUID();
- this.body = body;
-
- 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,
- alignZeros: true,
- customRange: {
- left: {min:undefined, max:undefined},
- right: {min:undefined, max:undefined}
- },
- title: {
- left: {text:undefined},
- right: {text:undefined}
- },
- format: {
- left: {decimals: undefined},
- right: {decimals: undefined}
- }
- };
-
- this.linegraphOptions = linegraphOptions;
- this.linegraphSVG = svg;
- this.props = {};
- this.DOMelements = { // dynamic elements
- lines: {},
- labels: {},
- title: {}
- };
-
- 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.hidden = false;
-
- this.stepPixels = 25;
- this.stepPixelsForced = 25;
- this.zeroCrossing = -1;
-
- this.lineOffset = 0;
- this.master = true;
- this.svgElements = {};
- this.iconsRemoved = false;
-
-
- this.groups = {};
- this.amountOfGroups = 0;
-
- // create the HTML DOM
- this._create();
-
- var me = this;
- this.body.emitter.on("verticalDrag", function() {
- me.dom.lineContainer.style.top = me.body.domProps.scrollTop + 'px';
- });
- }
-
- DataAxis.prototype = new Component();
-
-
- DataAxis.prototype.addGroup = function(label, graphOptions) {
- if (!this.groups.hasOwnProperty(label)) {
- this.groups[label] = graphOptions;
- }
- this.amountOfGroups += 1;
- };
-
- DataAxis.prototype.updateGroup = function(label, graphOptions) {
- this.groups[label] = graphOptions;
- };
-
- DataAxis.prototype.removeGroup = function(label) {
- if (this.groups.hasOwnProperty(label)) {
- delete this.groups[label];
- this.amountOfGroups -= 1;
- }
- };
-
-
- DataAxis.prototype.setOptions = function (options) {
- if (options) {
- var redraw = false;
- if (this.options.orientation != options.orientation && options.orientation !== undefined) {
- redraw = true;
- }
- var fields = [
- 'orientation',
- 'showMinorLabels',
- 'showMajorLabels',
- 'icons',
- 'majorLinesOffset',
- 'minorLinesOffset',
- 'labelOffsetX',
- 'labelOffsetY',
- 'iconWidth',
- 'width',
- 'visible',
- 'customRange',
- 'title',
- 'format',
- 'alignZeros'
- ];
- util.selectiveExtend(fields, this.options, options);
-
- this.minWidth = Number(('' + this.options.width).replace("px",""));
-
- if (redraw == true && this.dom.frame) {
- this.hide();
- this.show();
+ 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._updateUngrouped();
+ //this._updateGraph();
+ this.redraw(true);
};
/**
- * Create the HTML DOM for the DataAxis
+ * update a group object with the group dataset entree
+ *
+ * @param group
+ * @param groupId
+ * @private
*/
- 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;
- this.dom.lineContainer.style.position = 'relative';
-
- // 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;
+ 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 {
- x = this.width - iconWidth - iconOffset;
- }
-
- 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;
- }
+ 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]);
}
}
-
- DOMutil.cleanupElements(this.svgElements);
- this.iconsRemoved = false;
+ this.legendLeft.redraw();
+ this.legendRight.redraw();
};
- DataAxis.prototype._cleanupIcons = function() {
- if (this.iconsRemoved == false) {
- DOMutil.prepareElements(this.svgElements);
- DOMutil.cleanupElements(this.svgElements);
- this.iconsRemoved = true;
- }
- }
/**
- * Create the HTML DOM for the DataAxis
+ * this updates all groups, it is used when there is an update the the itemset.
+ *
+ * @private
*/
- DataAxis.prototype.show = function() {
- this.hidden = false;
- if (!this.dom.frame.parentNode) {
- if (this.options.orientation == 'left') {
- this.body.dom.left.appendChild(this.dom.frame);
+ LineGraph.prototype._updateAllGroupData = function () {
+ if (this.itemsData != null) {
+ var groupsContent = {};
+ var groupId;
+ for (groupId in this.groups) {
+ if (this.groups.hasOwnProperty(groupId)) {
+ groupsContent[groupId] = [];
+ }
}
- else {
- this.body.dom.right.appendChild(this.dom.frame);
+ for (var itemId in this.itemsData._data) {
+ if (this.itemsData._data.hasOwnProperty(itemId)) {
+ var item = this.itemsData._data[itemId];
+ if (groupsContent[item.group] === undefined) {
+ throw new Error('Cannot find referenced group. Possible reason: items added before groups? Groups need to be added before items, as items refer to groups.')
+ }
+ 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]);
+ }
}
- }
-
- if (!this.dom.lineContainer.parentNode) {
- this.body.dom.backgroundHorizontal.appendChild(this.dom.lineContainer);
}
};
+
/**
- * Create the HTML DOM for the DataAxis
+ * 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
*/
- DataAxis.prototype.hide = function() {
- this.hidden = true;
- 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);
- }
- };
+ 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;
+ }
+ }
+ }
- /**
- * Set a range (start and end)
- * @param end
- * @param start
- * @param end
- */
- DataAxis.prototype.setRange = function (start, end) {
- if (this.master == false && this.options.alignZeros == true && this.zeroCrossing != -1) {
- if (start > 0) {
- start = 0;
+ 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);
}
}
- this.range.start = start;
- this.range.end = end;
+ else {
+ delete this.groups[UNGROUPED];
+ this.legendLeft.removeGroup(UNGROUPED);
+ this.legendRight.removeGroup(UNGROUPED);
+ this.yAxisLeft.removeGroup(UNGROUPED);
+ this.yAxisRight.removeGroup(UNGROUPED);
+ }
+
+ this.legendLeft.redraw();
+ this.legendRight.redraw();
};
+
/**
- * Repaint the component
+ * Redraw the component, mandatory function
* @return {boolean} Returns true if the component is resized
*/
- DataAxis.prototype.redraw = function () {
+ LineGraph.prototype.redraw = function(forceGraphUpdate) {
var resized = false;
- var activeGroups = 0;
-
- // Make sure the line container adheres to the vertical scrolling.
- this.dom.lineContainer.style.top = this.body.domProps.scrollTop + 'px';
-
- 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...
- 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;
+ // calculate actual size and position
+ this.props.width = this.dom.frame.offsetWidth;
+ this.props.height = this.body.domProps.centerContainer.height;
- // update classname
- frame.className = 'dataaxis';
+ // update the graph if there is no lastWidth or with, used for the initial draw
+ if (this.lastWidth === undefined && this.props.width) {
+ forceGraphUpdate = true;
+ }
- // calculate character width and height
- this._calculateCharSize();
+ // check if this component is resized
+ resized = this._isResized() || resized;
- var orientation = this.options.orientation;
- var showMinorLabels = this.options.showMinorLabels;
- var showMajorLabels = this.options.showMajorLabels;
+ // 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.lastVisibleInterval = visibleInterval;
- // determine the width and height of the elements for the axis
- props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
- props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
- 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;
+ // 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.props.width);
+ this.svg.style.left = util.option.asSize(-this.props.width);
- // 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";
- this.props.width = this.body.domProps.left.width;
- this.props.height = this.body.domProps.left.height;
- }
- 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";
- this.props.width = this.body.domProps.right.width;
- this.props.height = this.body.domProps.right.height;
+ // if the height of the graph is set as proportional, change the height of the svg
+ if ((this.options.height + '').indexOf("%") != -1) {
+ this.updateSVGheight = true;
}
+ }
- resized = this._redrawLabels();
- resized = this._isResized() || resized;
-
- if (this.options.icons == true) {
- this._redrawGroupIcons();
- }
- else {
- this._cleanupIcons();
+ // update the height of the graph on each redraw of the graph.
+ if (this.updateSVGheight == true) {
+ if (this.options.graphHeight != this.body.domProps.centerContainer.height + 'px') {
+ this.options.graphHeight = this.body.domProps.centerContainer.height + 'px';
+ this.svg.style.height = this.body.domProps.centerContainer.height + 'px';
}
+ this.updateSVGheight = false;
+ }
+ else {
+ this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
+ }
- this._redrawTitle(orientation);
+ // zoomed is here to ensure that animations are shown correctly.
+ if (resized == true || zoomed == true || this.abortedGraphUpdate == true || forceGraphUpdate == true) {
+ resized = this._updateGraph() || resized;
+ }
+ 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.props.width != 0) {
+ var rangePerPixelInv = this.props.width/range;
+ var xOffset = offset * rangePerPixelInv;
+ this.svg.style.left = (-this.props.width - xOffset) + 'px';
+ }
+ }
}
+
+ this.legendLeft.redraw();
+ this.legendRight.redraw();
return resized;
};
+
/**
- * Repaint major and minor text labels and vertical grid lines
- * @private
+ * Update and redraw the graph.
+ *
*/
- DataAxis.prototype._redrawLabels = function () {
- var resized = false;
- DOMutil.prepareElements(this.DOMelements.lines);
- DOMutil.prepareElements(this.DOMelements.labels);
-
- var orientation = this.options['orientation'];
+ LineGraph.prototype._updateGraph = function () {
+ // reset the svg elements
+ DOMutil.prepareElements(this.svgElements);
+ if (this.props.width != 0 && this.itemsData != null) {
+ var group, i;
+ var preprocessedGroupData = {};
+ var processedGroupData = {};
+ var groupRanges = {};
+ var changeCalled = false;
- // 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;
+ // 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 only loads the data we require based on the timewindow
+ this._getRelevantData(groupIds, groupsData, minDate, maxDate);
- var step = new DataStep(
- this.range.start,
- this.range.end,
- minimumStep,
- this.dom.frame.offsetHeight,
- this.options.customRange[this.options.orientation],
- this.master == false && this.options.alignZeros // doess the step have to align zeros? only if not master and the options is on
- );
+ // apply sampling, if disabled, it will pass through this function.
+ this._applySampling(groupIds, groupsData);
- 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));
+ // we transform the X coordinates to detect collisions
+ for (i = 0; i < groupIds.length; i++) {
+ preprocessedGroupData[groupIds[i]] = this._convertXcoordinates(groupsData[groupIds[i]]);
+ }
- this.stepPixels = stepPixels;
+ // now all needed data has been collected we start the processing.
+ this._getYRanges(groupIds, preprocessedGroupData, groupRanges);
- var amountOfSteps = this.height / stepPixels;
- var stepDifference = 0;
+ // 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);
+ var MAX_CYCLES = 5;
+ if (changeCalled == true && this.COUNTER < MAX_CYCLES) {
+ DOMutil.cleanupElements(this.svgElements);
+ this.abortedGraphUpdate = true;
+ this.COUNTER++;
+ this.body.emitter.emit('change');
+ return true;
+ }
+ else {
+ if (this.COUNTER > MAX_CYCLES) {
+ console.log("WARNING: there may be an infinite loop in the _updateGraph emitter cycle.")
+ }
+ this.COUNTER = 0;
+ this.abortedGraphUpdate = false;
- // the slave axis needs to use the same horizontal lines as the master axis.
- 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;
+ // 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 (this.zeroCrossing != -1 && this.options.alignZeros == true) {
- var zeroStepDifference = (step.marginEnd / step.step) - this.zeroCrossing;
- if (zeroStepDifference > 0) {
- for (var i = 0; i < zeroStepDifference; i++) {step.next();}
- }
- else if (zeroStepDifference < 0) {
- for (var i = 0; i < -zeroStepDifference; i++) {step.previous();}
+ // draw the groups
+ for (i = 0; i < groupIds.length; i++) {
+ group = this.groups[groupIds[i]];
+ if (group.options.style != 'bar') { // bar needs to be drawn enmasse
+ group.draw(processedGroupData[groupIds[i]], group, this.framework);
+ }
+ }
+ BarGraphFunctions.draw(groupIds, processedGroupData, this.framework);
}
}
}
- else {
- amountOfSteps += 0.25;
- }
-
-
- this.valueAtZero = step.marginEnd;
- var marginStartPos = 0;
-
- // do not draw the first label
- var max = 1;
-
- // Get the number of decimal places
- var decimals;
- if(this.options.format[orientation] !== undefined) {
- decimals = this.options.format[orientation].decimals;
- }
- 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();
+ // cleanup unused svg elements
+ DOMutil.cleanupElements(this.svgElements);
+ return false;
+ };
- if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
- this._redrawLabel(y - 2, step.getCurrent(decimals), 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(decimals), orientation, 'yAxis major', this.props.majorCharHeight);
+ /**
+ * 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.
+ *
+ * @param {array} groupIds
+ * @param {object} groupsData
+ * @param {date} minDate
+ * @param {date} maxDate
+ * @private
+ */
+ LineGraph.prototype._getRelevantData = function (groupIds, groupsData, minDate, maxDate) {
+ 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.binarySearchValue(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);
+ }
+ }
+ }
}
- 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);
}
+ }
+ };
- if (this.master == true && step.current == 0) {
- this.zeroCrossing = max;
- }
- max++;
- }
+ /**
+ *
+ * @param groupIds
+ * @param groupsData
+ * @private
+ */
+ 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.master == false) {
- this.conversionFactor = y / (this.valueAtZero - step.current);
- }
- else {
- this.conversionFactor = this.dom.frame.offsetHeight / step.marginRange;
- }
+ // 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)));
- // Note that title is rotated, so we're using the height, not width!
- var titleWidth = 0;
- if (this.options.title[orientation] !== undefined && this.options.title[orientation].text !== undefined) {
- titleWidth = this.props.titleCharHeight;
- }
- var offset = this.options.icons == true ? Math.max(this.options.iconWidth, titleWidth) + this.options.labelOffsetX + 15 : titleWidth + this.options.labelOffsetX + 15;
+ var sampledData = [];
+ for (var j = 0; j < amountOfPoints; j += increment) {
+ sampledData.push(dataContainer[j]);
- // this will resize the yAxis to accommodate 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();
- resized = 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();
- resized = true;
- }
- else {
- DOMutil.cleanupElements(this.DOMelements.lines);
- DOMutil.cleanupElements(this.DOMelements.labels);
- resized = false;
+ }
+ groupsData[groupIds[i]] = sampledData;
+ }
+ }
+ }
}
-
- return resized;
};
- DataAxis.prototype.convertValue = function (value) {
- var invertedValue = this.valueAtZero - value;
- var convertedValue = invertedValue * this.conversionFactor;
- return convertedValue;
- };
/**
- * Create a label for the axis at position x
+ *
+ *
+ * @param {array} groupIds
+ * @param {object} groupsData
+ * @param {object} groupRanges | this is being filled here
* @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";
- }
-
- label.style.top = y - 0.5 * characterHeight + this.options.labelOffsetY + 'px';
-
- text += '';
+ LineGraph.prototype._getYRanges = function (groupIds, groupsData, groupRanges) {
+ var groupData, group, i;
+ var barCombinedDataLeft = [];
+ var barCombinedDataRight = [];
+ var options;
+ if (groupIds.length > 0) {
+ for (i = 0; i < groupIds.length; i++) {
+ groupData = groupsData[groupIds[i]];
+ options = this.groups[groupIds[i]].options;
+ if (groupData.length > 0) {
+ group = this.groups[groupIds[i]];
+ // if bar graphs are stacked, their range need to be handled differently and accumulated over all groups.
+ if (options.barChart.handleOverlap == 'stack' && options.style == 'bar') {
+ if (options.yAxisOrientation == 'left') {barCombinedDataLeft = barCombinedDataLeft.concat(group.getYRange(groupData)) ;}
+ else {barCombinedDataRight = barCombinedDataRight.concat(group.getYRange(groupData));}
+ }
+ else {
+ groupRanges[groupIds[i]] = group.getYRange(groupData,groupIds[i]);
+ }
+ }
+ }
- var largestWidth = Math.max(this.props.majorCharWidth,this.props.minorCharWidth);
- if (this.maxLabelSize < text.length * largestWidth) {
- this.maxLabelSize = text.length * largestWidth;
+ // if bar graphs are stacked, their range need to be handled differently and accumulated over all groups.
+ BarGraphFunctions.getStackedBarYRange(barCombinedDataLeft , groupRanges, groupIds, '__barchartLeft' , 'left' );
+ BarGraphFunctions.getStackedBarYRange(barCombinedDataRight, groupRanges, groupIds, '__barchartRight', 'right');
}
};
+
/**
- * Create a minor line for the axis at position y
- * @param y
- * @param orientation
- * @param className
- * @param offset
- * @param width
+ * 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
*/
- 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 = '';
+ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
+ var resized = 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) {
+ // this is here to make sure that if there are no items in the axis but there are groups, that there is no infinite draw/redraw loop.
+ for (var i = 0; i < groupIds.length; i++) {
+ var group = this.groups[groupIds[i]];
+ if (group && group.options.yAxisOrientation == 'left') {
+ yAxisLeftUsed = true;
+ minLeft = 0;
+ maxLeft = 0;
+ }
+ else {
+ yAxisRightUsed = true;
+ minRight = 0;
+ maxRight = 0;
+ }
+ }
- if (orientation == 'left') {
- line.style.left = (this.width - offset) + 'px';
+ // if there are items:
+ 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;
+
+ 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;
+ }
+ }
+ }
}
- else {
- line.style.right = (this.width - offset) + 'px';
+
+ if (yAxisLeftUsed == true) {
+ this.yAxisLeft.setRange(minLeft, maxLeft);
+ }
+ if (yAxisRightUsed == true) {
+ this.yAxisRight.setRange(minRight, maxRight);
}
+ }
+ resized = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft) || resized;
+ resized = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || resized;
+ if (yAxisRightUsed == true && yAxisLeftUsed == true) {
+ this.yAxisLeft.drawIcons = true;
+ this.yAxisRight.drawIcons = true;
+ }
+ else {
+ this.yAxisLeft.drawIcons = false;
+ this.yAxisRight.drawIcons = false;
+ }
+ this.yAxisRight.master = !yAxisLeftUsed;
- line.style.width = width + 'px';
- line.style.top = y + 'px';
+ if (this.yAxisRight.master == false) {
+ if (yAxisRightUsed == true) {this.yAxisLeft.lineOffset = this.yAxisRight.width;}
+ else {this.yAxisLeft.lineOffset = 0;}
+
+ resized = this.yAxisLeft.redraw() || resized;
+ this.yAxisRight.stepPixelsForced = this.yAxisLeft.stepPixels;
+ this.yAxisRight.zeroCrossing = this.yAxisLeft.zeroCrossing;
+ resized = this.yAxisRight.redraw() || resized;
+ }
+ else {
+ resized = this.yAxisRight.redraw() || resized;
+ }
+
+ // 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 resized;
};
+
/**
- * Create a title for the axis
+ * 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 orientation
+ * @param axis
*/
- DataAxis.prototype._redrawTitle = function (orientation) {
- DOMutil.prepareElements(this.DOMelements.title);
-
- // Check if the title is defined for this axes
- if (this.options.title[orientation] !== undefined && this.options.title[orientation].text !== undefined) {
- var title = DOMutil.getDOMElement('div', this.DOMelements.title, this.dom.frame);
- title.className = 'yAxis title ' + orientation;
- title.innerHTML = this.options.title[orientation].text;
-
- // Add style - if provided
- if (this.options.title[orientation].style !== undefined) {
- util.addCssText(title, this.options.title[orientation].style);
- }
-
- if (orientation == 'left') {
- title.style.left = this.props.titleCharHeight + 'px';
+ LineGraph.prototype._toggleAxisVisiblity = function (axisUsed, axis) {
+ var changed = false;
+ if (axisUsed == false) {
+ if (axis.dom.frame.parentNode && axis.hidden == false) {
+ axis.hide()
+ changed = true;
}
- else {
- title.style.right = this.props.titleCharHeight + 'px';
+ }
+ else {
+ if (!axis.dom.frame.parentNode && axis.hidden == true) {
+ axis.show();
+ changed = true;
}
-
- title.style.width = this.height + 'px';
}
-
- // we need to clean up in case we did not use all elements.
- DOMutil.cleanupElements(this.DOMelements.title);
+ return changed;
};
-
-
/**
- * 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.
+ * 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
*/
- 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);
-
- this.props.minorCharHeight = measureCharMinor.clientHeight;
- this.props.minorCharWidth = measureCharMinor.clientWidth;
+ LineGraph.prototype._convertXcoordinates = function (datapoints) {
+ var extractedData = [];
+ var xValue, yValue;
+ var toScreen = this.body.util.toScreen;
- this.dom.frame.removeChild(measureCharMinor);
+ for (var i = 0; i < datapoints.length; i++) {
+ xValue = toScreen(datapoints[i].x) + this.props.width;
+ yValue = datapoints[i].y;
+ extractedData.push({x: xValue, y: yValue});
}
- 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);
+ return extractedData;
+ };
- this.props.majorCharHeight = measureCharMajor.clientHeight;
- this.props.majorCharWidth = measureCharMajor.clientWidth;
- this.dom.frame.removeChild(measureCharMajor);
+ /**
+ * 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
+ * @param group
+ * @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;
}
- if (!('titleCharHeight' in this.props)) {
- var textTitle = document.createTextNode('0');
- var measureCharTitle = document.createElement('div');
- measureCharTitle.className = 'yAxis title measure';
- measureCharTitle.appendChild(textTitle);
- this.dom.frame.appendChild(measureCharTitle);
+ for (var i = 0; i < datapoints.length; i++) {
+ xValue = toScreen(datapoints[i].x) + this.props.width;
+ yValue = Math.round(axis.convertValue(datapoints[i].y));
+ extractedData.push({x: xValue, y: yValue});
+ }
- this.props.titleCharHeight = measureCharTitle.clientHeight;
- this.props.titleCharWidth = measureCharTitle.clientWidth;
+ group.setZeroPosition(Math.min(svgHeight, axis.convertValue(0)));
- this.dom.frame.removeChild(measureCharTitle);
- }
+ return extractedData;
};
- /**
- * 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
- */
- DataAxis.prototype.snap = function(date) {
- return this.step.snap(date);
- };
- module.exports = DataAxis;
+ module.exports = LineGraph;
/***/ },
/* 44 */
/***/ function(module, exports, __webpack_require__) {
+ var util = __webpack_require__(1);
+ var DOMutil = __webpack_require__(6);
+ var Component = __webpack_require__(23);
+ var DataStep = __webpack_require__(45);
+
/**
- * @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
+ * A horizontal time axis
+ * @param {Object} [options] See DataAxis.setOptions for the available
+ * options.
+ * @constructor DataAxis
+ * @extends Component
+ * @param body
*/
- function DataStep(start, end, minimumStep, containerHeight, customRange, alignZeros) {
- // variables
- this.current = 0;
-
- this.autoScale = true;
- this.stepIndex = 0;
- this.step = 1;
- this.scale = 1;
+ function DataAxis (body, options, svg, linegraphOptions) {
+ this.id = util.randomUUID();
+ this.body = body;
- this.marginStart;
- this.marginEnd;
- this.deadSpace = 0;
+ 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,
+ alignZeros: true,
+ customRange: {
+ left: {min:undefined, max:undefined},
+ right: {min:undefined, max:undefined}
+ },
+ title: {
+ left: {text:undefined},
+ right: {text:undefined}
+ },
+ format: {
+ left: {decimals: undefined},
+ right: {decimals: undefined}
+ }
+ };
- this.majorSteps = [1, 2, 5, 10];
- this.minorSteps = [0.25, 0.5, 1, 2];
+ this.linegraphOptions = linegraphOptions;
+ this.linegraphSVG = svg;
+ this.props = {};
+ this.DOMelements = { // dynamic elements
+ lines: {},
+ labels: {},
+ title: {}
+ };
- this.alignZeros = alignZeros;
+ this.dom = {};
- this.setRange(start, end, minimumStep, containerHeight, customRange);
- }
+ 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.hidden = false;
- /**
- * 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
- */
- 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;
+ this.stepPixels = 25;
+ this.stepPixelsForced = 25;
+ this.zeroCrossing = -1;
- if (this._start == this._end) {
- this._start -= 0.75;
- this._end += 1;
- }
+ this.lineOffset = 0;
+ this.master = true;
+ this.svgElements = {};
+ this.iconsRemoved = false;
- if (this.autoScale == true) {
- this.setMinimumStep(minimumStep, containerHeight);
- }
- this.setFirst(customRange);
- };
+ this.groups = {};
+ this.amountOfGroups = 0;
- /**
- * Automatically determine the scale that bests fits the provided minimum step
- * @param {Number} [minimumStep] The minimum step size in milliseconds
- */
- 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);
+ // create the HTML DOM
+ this._create();
- var minorStepIdx = -1;
- var magnitudefactor = Math.pow(10,orderOfMagnitude);
+ var me = this;
+ this.body.emitter.on("verticalDrag", function() {
+ me.dom.lineContainer.style.top = me.body.domProps.scrollTop + 'px';
+ });
+ }
- var start = 0;
- if (orderOfMagnitude < 0) {
- start = orderOfMagnitude;
- }
+ DataAxis.prototype = new Component();
- 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;
- }
+
+ DataAxis.prototype.addGroup = function(label, graphOptions) {
+ if (!this.groups.hasOwnProperty(label)) {
+ this.groups[label] = graphOptions;
}
- this.stepIndex = minorStepIdx;
- this.scale = magnitudefactor;
- this.step = magnitudefactor * this.minorSteps[minorStepIdx];
+ this.amountOfGroups += 1;
};
+ DataAxis.prototype.updateGroup = function(label, graphOptions) {
+ this.groups[label] = graphOptions;
+ };
-
- /**
- * Round the current date to the first minor date value
- * This must be executed once when the current date is set to start Date
- */
- DataStep.prototype.setFirst = function(customRange) {
- if (customRange === undefined) {
- customRange = {};
+ DataAxis.prototype.removeGroup = function(label) {
+ if (this.groups.hasOwnProperty(label)) {
+ delete this.groups[label];
+ this.amountOfGroups -= 1;
}
+ };
- 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;
- this.marginEnd = customRange.max === undefined ? this.roundToMinor(niceEnd) : customRange.max;
- this.marginStart = customRange.min === undefined ? this.roundToMinor(niceStart) : customRange.min;
+ DataAxis.prototype.setOptions = function (options) {
+ if (options) {
+ var redraw = false;
+ if (this.options.orientation != options.orientation && options.orientation !== undefined) {
+ redraw = true;
+ }
+ var fields = [
+ 'orientation',
+ 'showMinorLabels',
+ 'showMajorLabels',
+ 'icons',
+ 'majorLinesOffset',
+ 'minorLinesOffset',
+ 'labelOffsetX',
+ 'labelOffsetY',
+ 'iconWidth',
+ 'width',
+ 'visible',
+ 'customRange',
+ 'title',
+ 'format',
+ 'alignZeros'
+ ];
+ util.selectiveExtend(fields, this.options, options);
- // if we need to align the zero's we need to make sure that there is a zero to use.
- if (this.alignZeros == true && (this.marginEnd - this.marginStart) % this.step != 0) {
- this.marginEnd += this.marginEnd % this.step;
+ this.minWidth = Number(('' + this.options.width).replace("px",""));
+
+ if (redraw == true && this.dom.frame) {
+ this.hide();
+ this.show();
+ }
}
+ };
- this.deadSpace = this.roundToMinor(niceEnd) - niceEnd + this.roundToMinor(niceStart) - niceStart;
- this.marginRange = this.marginEnd - this.marginStart;
+ /**
+ * Create the HTML DOM for the DataAxis
+ */
+ 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;
+ this.dom.lineContainer.style.position = 'relative';
- this.current = this.marginEnd;
+ // 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);
};
- 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]);
+ 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 {
- return rounded;
+ x = this.width - iconWidth - iconOffset;
}
- }
+ 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;
+ }
+ }
+ }
- /**
- * 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);
+ DOMutil.cleanupElements(this.svgElements);
+ this.iconsRemoved = false;
};
+ DataAxis.prototype._cleanupIcons = function() {
+ if (this.iconsRemoved == false) {
+ DOMutil.prepareElements(this.svgElements);
+ DOMutil.cleanupElements(this.svgElements);
+ this.iconsRemoved = true;
+ }
+ }
+
/**
- * Do the next step
+ * Create the HTML DOM for the DataAxis
*/
- DataStep.prototype.next = function() {
- var prev = this.current;
- this.current -= this.step;
+ DataAxis.prototype.show = function() {
+ this.hidden = false;
+ 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);
+ }
+ }
- // safety mechanism: if current time is still unchanged, move to the end
- if (this.current == prev) {
- this.current = this._end;
+ if (!this.dom.lineContainer.parentNode) {
+ this.body.dom.backgroundHorizontal.appendChild(this.dom.lineContainer);
}
};
/**
- * Do the next step
+ * Create the HTML DOM for the DataAxis
*/
- DataStep.prototype.previous = function() {
- this.current += this.step;
- this.marginEnd += this.step;
- this.marginRange = this.marginEnd - this.marginStart;
- };
+ DataAxis.prototype.hide = function() {
+ this.hidden = true;
+ 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);
+ }
+ };
+ /**
+ * Set a range (start and end)
+ * @param end
+ * @param start
+ * @param end
+ */
+ DataAxis.prototype.setRange = function (start, end) {
+ if (this.master == false && this.options.alignZeros == true && this.zeroCrossing != -1) {
+ if (start > 0) {
+ start = 0;
+ }
+ }
+ this.range.start = start;
+ this.range.end = end;
+ };
/**
- * Get the current datetime
- * @return {String} current The current date
+ * Repaint the component
+ * @return {boolean} Returns true if the component is resized
*/
- DataStep.prototype.getCurrent = function(decimals) {
- // prevent round-off errors when close to zero
- var current = (Math.abs(this.current) < this.step / 2) ? 0 : this.current;
- var toPrecision = '' + Number(current).toPrecision(5);
+ DataAxis.prototype.redraw = function () {
+ var resized = false;
+ var activeGroups = 0;
+
+ // Make sure the line container adheres to the vertical scrolling.
+ this.dom.lineContainer.style.top = this.body.domProps.scrollTop + 'px';
- // If decimals is specified, then limit or extend the string as required
- if(decimals !== undefined && !isNaN(Number(decimals))) {
- // If string includes exponent, then we need to add it to the end
- var exp = "";
- var index = toPrecision.indexOf("e");
- if(index != -1) {
- // Get the exponent
- exp = toPrecision.slice(index);
- // Remove the exponent in case we need to zero-extend
- toPrecision = toPrecision.slice(0, index);
- }
- index = Math.max(toPrecision.indexOf(","), toPrecision.indexOf("."));
- if(index === -1) {
- // No decimal found - if we want decimals, then we need to add it
- if(decimals !== 0) {
- toPrecision += '.';
- }
- // Calculate how long the string should be
- index = toPrecision.length + decimals;
- }
- else if(decimals !== 0) {
- // Calculate how long the string should be - accounting for the decimal place
- index += decimals + 1;
- }
- if(index > toPrecision.length) {
- // We need to add zeros!
- for(var cnt = index - toPrecision.length; cnt > 0; cnt--) {
- toPrecision += '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++;
}
}
- else {
- // we need to remove characters
- toPrecision = toPrecision.slice(0, index);
- }
- // Add the exponent if there is one
- toPrecision += exp;
}
- else {
- if (toPrecision.indexOf(",") != -1 || toPrecision.indexOf(".") != -1) {
- // If no decimal is specified, and there are decimal places, remove trailing zeros
- 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;
- }
- }
- }
+ if (this.amountOfGroups == 0 || activeGroups == 0) {
+ this.hide();
}
+ else {
+ this.show();
+ this.height = Number(this.linegraphSVG.style.height.replace("px",""));
- 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) {
+ // 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;
- /**
- * 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.
- */
- DataStep.prototype.isMajor = function() {
- return (this.current % (this.scale * this.majorSteps[this.stepIndex]) == 0);
- };
+ // update classname
+ frame.className = 'dataaxis';
- module.exports = DataStep;
+ // calculate character width and height
+ this._calculateCharSize();
+ var orientation = this.options.orientation;
+ var showMinorLabels = this.options.showMinorLabels;
+ var showMajorLabels = this.options.showMajorLabels;
-/***/ },
-/* 45 */
-/***/ function(module, exports, __webpack_require__) {
+ // determine the width and height of the elements 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 Line = __webpack_require__(46);
- var Bar = __webpack_require__(48);
- var Points = __webpack_require__(47);
+ 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;
- /**
- * /**
- * @param {object} group | the object of the group from the dataset
- * @param {string} groupId | ID of the group
- * @param {object} options | the default options
- * @param {array} groupsUsingDefaultStyles | this array has one entree.
- * It is passed as an array so it is passed by reference.
- * It enumerates through the default styles
- * @constructor
- */
- 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;
- }
+ // 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";
+ this.props.width = this.body.domProps.left.width;
+ this.props.height = this.body.domProps.left.height;
+ }
+ 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";
+ this.props.width = this.body.domProps.right.width;
+ this.props.height = this.body.domProps.right.height;
+ }
+ resized = this._redrawLabels();
+ resized = this._isResized() || resized;
- /**
- * this loads a reference to all items in this group into this group.
- * @param {array} items
- */
- 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;})
+ if (this.options.icons == true) {
+ this._redrawGroupIcons();
}
+ else {
+ this._cleanupIcons();
+ }
+
+ this._redrawTitle(orientation);
}
- else {
- this.itemsData = [];
- }
+ return resized;
};
-
/**
- * this is used for plotting barcharts, this way, we only have to calculate it once.
- * @param pos
+ * Repaint major and minor text labels and vertical grid lines
+ * @private
*/
- GraphGroup.prototype.setZeroPosition = function(pos) {
- this.zeroPosition = pos;
- };
+ DataAxis.prototype._redrawLabels = function () {
+ var resized = false;
+ DOMutil.prepareElements(this.DOMelements.lines);
+ DOMutil.prepareElements(this.DOMelements.labels);
+ var orientation = this.options['orientation'];
- /**
- * set the options of the graph group over the default options.
- * @param options
- */
- GraphGroup.prototype.setOptions = function(options) {
- if (options !== undefined) {
- var fields = ['sampling','style','sort','yAxisOrientation','barChart'];
- util.selectiveDeepExtend(fields, this.options, options);
+ // 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;
- util.mergeOptions(this.options, options,'catmullRom');
- util.mergeOptions(this.options, options,'drawPoints');
- util.mergeOptions(this.options, options,'shaded');
+ var step = new DataStep(
+ this.range.start,
+ this.range.end,
+ minimumStep,
+ this.dom.frame.offsetHeight,
+ this.options.customRange[this.options.orientation],
+ this.master == false && this.options.alignZeros // doess the step have to align zeros? only if not master and the options is on
+ );
- 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;
- }
- }
- }
+ 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;
+
+ // the slave axis needs to use the same horizontal lines as the master axis.
+ 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;
- if (this.options.style == 'line') {
- this.type = new Line(this.id, this.options);
- }
- else if (this.options.style == 'bar') {
- this.type = new Bar(this.id, this.options);
+ if (this.zeroCrossing != -1 && this.options.alignZeros == true) {
+ var zeroStepDifference = (step.marginEnd / step.step) - this.zeroCrossing;
+ if (zeroStepDifference > 0) {
+ for (var i = 0; i < zeroStepDifference; i++) {step.next();}
+ }
+ else if (zeroStepDifference < 0) {
+ for (var i = 0; i < -zeroStepDifference; i++) {step.previous();}
+ }
+ }
}
- else if (this.options.style == 'points') {
- this.type = new Points(this.id, this.options);
+ else {
+ amountOfSteps += 0.25;
}
- };
- /**
- * this updates the current group class with the latest group dataset entree, used in _updateGroup in linegraph
- * @param group
- */
- 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.style = group.style;
- this.setOptions(group.options);
- };
+ this.valueAtZero = step.marginEnd;
+ var marginStartPos = 0;
+ // do not draw the first label
+ var max = 1;
- /**
- * draw the icon for the legend.
- *
- * @param x
- * @param y
- * @param JSONcontainer
- * @param SVGcontainer
- * @param iconWidth
- * @param iconHeight
- */
- GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, iconWidth, iconHeight) {
- var fillHeight = iconHeight * 0.5;
- var path, fillPath;
+ // Get the number of decimal places
+ var decimals;
+ if(this.options.format[orientation] !== undefined) {
+ decimals = this.options.format[orientation].decimals;
+ }
- 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");
+ 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.style == 'line') {
- path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
- path.setAttributeNS(null, "class", this.className);
- if(this.style !== undefined) {
- path.setAttributeNS(null, "style", this.style);
+ if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
+ this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis minor', this.props.minorCharHeight);
}
- 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);
+ 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(decimals), orientation, 'yAxis major', this.props.majorCharHeight);
}
- fillPath.setAttributeNS(null, "class", this.className + " iconFill");
+ 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);
}
- if (this.options.drawPoints.enabled == true) {
- DOMutil.drawPoint(x + 0.5 * iconWidth,y, this, JSONcontainer, SVGcontainer);
+ if (this.master == true && step.current == 0) {
+ this.zeroCrossing = max;
}
+
+ max++;
+ }
+
+ if (this.master == false) {
+ this.conversionFactor = y / (this.valueAtZero - step.current);
}
else {
- var barWidth = Math.round(0.3 * iconWidth);
- var bar1Height = Math.round(0.4 * iconHeight);
- var bar2Height = Math.round(0.75 * iconHeight);
+ this.conversionFactor = this.dom.frame.offsetHeight / step.marginRange;
+ }
- var offset = Math.round((iconWidth - (2 * barWidth))/3);
+ // Note that title is rotated, so we're using the height, not width!
+ var titleWidth = 0;
+ if (this.options.title[orientation] !== undefined && this.options.title[orientation].text !== undefined) {
+ titleWidth = this.props.titleCharHeight;
+ }
+ var offset = this.options.icons == true ? Math.max(this.options.iconWidth, titleWidth) + this.options.labelOffsetX + 15 : titleWidth + this.options.labelOffsetX + 15;
- 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);
+ // this will resize the yAxis to accommodate 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();
+ resized = 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();
+ resized = true;
+ }
+ else {
+ DOMutil.cleanupElements(this.DOMelements.lines);
+ DOMutil.cleanupElements(this.DOMelements.labels);
+ resized = false;
}
+
+ return resized;
};
+ DataAxis.prototype.convertValue = function (value) {
+ var invertedValue = this.valueAtZero - value;
+ var convertedValue = invertedValue * this.conversionFactor;
+ return convertedValue;
+ };
/**
- * return the legend entree for this group.
- *
- * @param iconWidth
- * @param iconHeight
- * @returns {{icon: HTMLElement, label: (group.content|*|string), orientation: (.options.yAxisOrientation|*)}}
+ * Create a label for the axis at position x
+ * @private
+ * @param y
+ * @param text
+ * @param orientation
+ * @param className
+ * @param characterHeight
*/
- 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};
- }
-
- GraphGroup.prototype.getYRange = function(groupData) {
- return this.type.getYRange(groupData);
- }
-
- GraphGroup.prototype.draw = function(dataset, group, framework) {
- this.type.draw(dataset, group, framework);
- }
-
+ 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";
+ }
- module.exports = GraphGroup;
+ label.style.top = y - 0.5 * characterHeight + this.options.labelOffsetY + 'px';
+ text += '';
-/***/ },
-/* 46 */
-/***/ function(module, exports, __webpack_require__) {
+ var largestWidth = Math.max(this.props.majorCharWidth,this.props.minorCharWidth);
+ if (this.maxLabelSize < text.length * largestWidth) {
+ this.maxLabelSize = text.length * largestWidth;
+ }
+ };
/**
- * Created by Alex on 11/11/2014.
+ * Create a minor line for the axis at position y
+ * @param y
+ * @param orientation
+ * @param className
+ * @param offset
+ * @param width
*/
- var DOMutil = __webpack_require__(6);
- var Points = __webpack_require__(47);
+ 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 Line(groupId, options) {
- this.groupId = groupId;
- this.options = options;
- }
+ if (orientation == 'left') {
+ line.style.left = (this.width - offset) + 'px';
+ }
+ else {
+ line.style.right = (this.width - offset) + 'px';
+ }
- Line.prototype.getYRange = function(groupData) {
- var yMin = groupData[0].y;
- var yMax = groupData[0].y;
- for (var j = 0; j < groupData.length; j++) {
- yMin = yMin > groupData[j].y ? groupData[j].y : yMin;
- yMax = yMax < groupData[j].y ? groupData[j].y : yMax;
+ line.style.width = width + 'px';
+ line.style.top = y + 'px';
}
- return {min: yMin, max: yMax, yAxisOrientation: this.options.yAxisOrientation};
};
-
/**
- * draw a line graph
- *
- * @param dataset
- * @param group
+ * Create a title for the axis
+ * @private
+ * @param orientation
*/
- Line.prototype.draw = function (dataset, group, framework) {
- if (dataset != null) {
- if (dataset.length > 0) {
- var path, d;
- var svgHeight = Number(framework.svg.style.height.replace('px',''));
- path = DOMutil.getSVGElement('path', framework.svgElements, framework.svg);
- path.setAttributeNS(null, "class", group.className);
- if(group.style !== undefined) {
- path.setAttributeNS(null, "style", group.style);
- }
-
- // construct path from dataset
- if (group.options.catmullRom.enabled == true) {
- d = Line._catmullRom(dataset, group);
- }
- else {
- d = Line._linear(dataset);
- }
+ DataAxis.prototype._redrawTitle = function (orientation) {
+ DOMutil.prepareElements(this.DOMelements.title);
- // append with points for fill and finalize the path
- if (group.options.shaded.enabled == true) {
- var fillPath = DOMutil.getSVGElement('path', framework.svgElements, framework.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");
- if(group.options.shaded.style !== undefined) {
- fillPath.setAttributeNS(null, "style", group.options.shaded.style);
- }
- fillPath.setAttributeNS(null, "d", dFill);
- }
- // copy properties to path for drawing.
- path.setAttributeNS(null, 'd', 'M' + d);
+ // Check if the title is defined for this axes
+ if (this.options.title[orientation] !== undefined && this.options.title[orientation].text !== undefined) {
+ var title = DOMutil.getDOMElement('div', this.DOMelements.title, this.dom.frame);
+ title.className = 'yAxis title ' + orientation;
+ title.innerHTML = this.options.title[orientation].text;
- // draw points
- if (group.options.drawPoints.enabled == true) {
- Points.draw(dataset, group, framework);
- }
+ // Add style - if provided
+ if (this.options.title[orientation].style !== undefined) {
+ util.addCssText(title, this.options.title[orientation].style);
}
- }
- };
-
-
-
- /**
- * 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
- */
- Line._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;
+ if (orientation == 'left') {
+ title.style.left = this.props.titleCharHeight + 'px';
+ }
+ else {
+ title.style.right = this.props.titleCharHeight + 'px';
+ }
+ title.style.width = this.height + 'px';
+ }
- // 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
+ // we need to clean up in case we did not use all elements.
+ DOMutil.cleanupElements(this.DOMelements.title);
+ };
- // 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 };
- d += 'C' +
- bp1.x + ',' +
- bp1.y + ' ' +
- bp2.x + ',' +
- bp2.y + ' ' +
- p2.x + ',' +
- p2.y + ' ';
- }
- return d;
- };
/**
- * 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
- * @param group
- * @returns {string}
+ * 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
*/
- Line._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++) {
-
- p0 = (i == 0) ? data[0] : data[i-1];
- p1 = data[i];
- p2 = data[i+1];
- p3 = (i + 2 < length) ? data[i+2] : p2;
-
- 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));
-
- // Catmull-Rom to Cubic Bezier conversion matrix
+ 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);
- // A = 2d1^2a + 3d1^a * d2^a + d3^2a
- // B = 2d3^2a + 3d3^a * d2^a + d2^2a
+ this.props.minorCharHeight = measureCharMinor.clientHeight;
+ this.props.minorCharWidth = measureCharMinor.clientWidth;
- // [ 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 ]
+ this.dom.frame.removeChild(measureCharMinor);
+ }
- 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);
+ 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);
- 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;}
+ this.props.majorCharHeight = measureCharMajor.clientHeight;
+ this.props.majorCharWidth = measureCharMajor.clientWidth;
- bp1 = { x: ((-d2pow2A * p0.x + A*p1.x + d1pow2A * p2.x) * N),
- y: ((-d2pow2A * p0.y + A*p1.y + d1pow2A * p2.y) * N)};
+ this.dom.frame.removeChild(measureCharMajor);
+ }
- bp2 = { x: (( d3pow2A * p1.x + B*p2.x - d2pow2A * p3.x) * M),
- y: (( d3pow2A * p1.y + B*p2.y - d2pow2A * p3.y) * M)};
+ if (!('titleCharHeight' in this.props)) {
+ var textTitle = document.createTextNode('0');
+ var measureCharTitle = document.createElement('div');
+ measureCharTitle.className = 'yAxis title measure';
+ measureCharTitle.appendChild(textTitle);
+ this.dom.frame.appendChild(measureCharTitle);
- 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 + ' ';
- }
+ this.props.titleCharHeight = measureCharTitle.clientHeight;
+ this.props.titleCharWidth = measureCharTitle.clientWidth;
- return d;
+ this.dom.frame.removeChild(measureCharTitle);
}
};
/**
- * this generates the SVG path for a linear drawing between datapoints.
- * @param data
- * @returns {string}
- * @private
+ * 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
*/
- Line._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;
+ DataAxis.prototype.snap = function(date) {
+ return this.step.snap(date);
};
- module.exports = Line;
+ module.exports = DataAxis;
/***/ },
-/* 47 */
+/* 45 */
/***/ function(module, exports, __webpack_require__) {
/**
- * Created by Alex on 11/11/2014.
- */
- var DOMutil = __webpack_require__(6);
-
- function Points(groupId, options) {
- this.groupId = groupId;
- this.options = options;
- }
+ * @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, alignZeros) {
+ // variables
+ this.current = 0;
+
+ this.autoScale = true;
+ this.stepIndex = 0;
+ this.step = 1;
+ this.scale = 1;
+ this.marginStart;
+ this.marginEnd;
+ this.deadSpace = 0;
- Points.prototype.getYRange = function(groupData) {
- var yMin = groupData[0].y;
- var yMax = groupData[0].y;
- for (var j = 0; j < groupData.length; j++) {
- yMin = yMin > groupData[j].y ? groupData[j].y : yMin;
- yMax = yMax < groupData[j].y ? groupData[j].y : yMax;
- }
- return {min: yMin, max: yMax, yAxisOrientation: this.options.yAxisOrientation};
- };
+ this.majorSteps = [1, 2, 5, 10];
+ this.minorSteps = [0.25, 0.5, 1, 2];
- Points.prototype.draw = function(dataset, group, framework, offset) {
- Points.draw(dataset, group, framework, offset);
+ this.alignZeros = alignZeros;
+
+ this.setRange(start, end, minimumStep, containerHeight, customRange);
}
+
+
/**
- * draw the data points
- *
- * @param {Array} dataset
- * @param {Object} JSONcontainer
- * @param {Object} svg | SVG DOM element
- * @param {GraphGroup} group
- * @param {Number} [offset]
+ * 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
*/
- Points.draw = function (dataset, group, framework, offset) {
- if (offset === undefined) {offset = 0;}
- for (var i = 0; i < dataset.length; i++) {
- DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, group, framework.svgElements, framework.svg);
- }
- };
+ 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;
+ }
- module.exports = Points;
+ if (this.autoScale == true) {
+ this.setMinimumStep(minimumStep, containerHeight);
+ }
-/***/ },
-/* 48 */
-/***/ function(module, exports, __webpack_require__) {
+ this.setFirst(customRange);
+ };
/**
- * Created by Alex on 11/11/2014.
+ * Automatically determine the scale that bests fits the provided minimum step
+ * @param {Number} [minimumStep] The minimum step size in milliseconds
*/
- var DOMutil = __webpack_require__(6);
- var Points = __webpack_require__(47);
+ 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);
- function Bargraph(groupId, options) {
- this.groupId = groupId;
- this.options = options;
- }
+ var minorStepIdx = -1;
+ var magnitudefactor = Math.pow(10,orderOfMagnitude);
- Bargraph.prototype.getYRange = function(groupData) {
- if (this.options.barChart.handleOverlap != 'stack') {
- var yMin = groupData[0].y;
- var yMax = groupData[0].y;
- for (var j = 0; j < groupData.length; j++) {
- yMin = yMin > groupData[j].y ? groupData[j].y : yMin;
- yMax = yMax < groupData[j].y ? groupData[j].y : yMax;
- }
- return {min: yMin, max: yMax, yAxisOrientation: this.options.yAxisOrientation};
+ var start = 0;
+ if (orderOfMagnitude < 0) {
+ start = orderOfMagnitude;
}
- else {
- var barCombinedData = [];
- for (var j = 0; j < groupData.length; j++) {
- barCombinedData.push({
- x: groupData[j].x,
- y: groupData[j].y,
- groupId: this.groupId
- });
+
+ 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;
}
- return barCombinedData;
}
+ this.stepIndex = minorStepIdx;
+ this.scale = magnitudefactor;
+ this.step = magnitudefactor * this.minorSteps[minorStepIdx];
};
/**
- * draw a bar graph
- *
- * @param groupIds
- * @param processedGroupData
+ * Round the current date to the first minor date value
+ * This must be executed once when the current date is set to start Date
*/
- Bargraph.draw = function (groupIds, processedGroupData, framework) {
- var combinedData = [];
- var intersections = {};
- var coreDistance;
- var key, drawData;
- var group;
- var i,j;
- var barPoints = 0;
-
- // combine all barchart data
- for (i = 0; i < groupIds.length; i++) {
- group = framework.groups[groupIds[i]];
- if (group.options.style == 'bar') {
- if (group.visible == true && (framework.options.groups.visibility[groupIds[i]] === undefined || framework.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;
- }
- }
- }
+ DataStep.prototype.setFirst = function(customRange) {
+ if (customRange === undefined) {
+ customRange = {};
}
- if (barPoints == 0) {return;}
+ 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;
- // 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;
- }
- });
+ this.marginEnd = customRange.max === undefined ? this.roundToMinor(niceEnd) : customRange.max;
+ this.marginStart = customRange.min === undefined ? this.roundToMinor(niceStart) : customRange.min;
- // get intersections
- Bargraph._getDataIntersections(intersections, combinedData);
+ // if we need to align the zero's we need to make sure that there is a zero to use.
+ if (this.alignZeros == true && (this.marginEnd - this.marginStart) % this.step != 0) {
+ this.marginEnd += this.marginEnd % this.step;
+ }
- // plot barchart
- for (i = 0; i < combinedData.length; i++) {
- group = framework.groups[combinedData[i].groupId];
- var minWidth = 0.1 * group.options.barChart.width;
+ this.deadSpace = this.roundToMinor(niceEnd) - niceEnd + this.roundToMinor(niceStart) - niceStart;
+ this.marginRange = this.marginEnd - this.marginStart;
- 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 = Bargraph._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 = Bargraph._getSafeDrawData(coreDistance, group, minWidth);
- intersections[key].resolved += 1;
- 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', framework.svgElements, framework.svg);
- // draw points
- if (group.options.drawPoints.enabled == true) {
- DOMutil.drawPoint(combinedData[i].x + drawData.offset, combinedData[i].y, group, framework.svgElements, framework.svg);
- }
- }
+ this.current = this.marginEnd;
};
+ 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;
+ }
+ }
+
/**
- * Fill the intersections object with counters of how many datapoints share the same x coordinates
- * @param intersections
- * @param combinedData
- * @private
+ * Check if the there is a next step
+ * @return {boolean} true if the current date has not passed the end date
*/
- Bargraph._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};
- }
- intersections[combinedData[i].x].amount += 1;
- }
+ DataStep.prototype.hasNext = function () {
+ return (this.current >= this.marginStart);
+ };
+
+ /**
+ * Do the next step
+ */
+ 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;
}
};
+ /**
+ * Do the next step
+ */
+ DataStep.prototype.previous = function() {
+ this.current += this.step;
+ this.marginEnd += this.step;
+ this.marginRange = this.marginEnd - this.marginStart;
+ };
+
+
/**
- * 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
+ * Get the current datetime
+ * @return {String} current The current date
*/
- Bargraph._getSafeDrawData = function (coreDistance, group, minWidth) {
- var width, offset;
- if (coreDistance < group.options.barChart.width && coreDistance > 0) {
- width = coreDistance < minWidth ? minWidth : coreDistance;
+ DataStep.prototype.getCurrent = function(decimals) {
+ // prevent round-off errors when close to zero
+ var current = (Math.abs(this.current) < this.step / 2) ? 0 : this.current;
+ var toPrecision = '' + Number(current).toPrecision(5);
- offset = 0; // recalculate offset with the new width;
- if (group.options.barChart.align == 'left') {
- offset -= 0.5 * coreDistance;
+ // If decimals is specified, then limit or extend the string as required
+ if(decimals !== undefined && !isNaN(Number(decimals))) {
+ // If string includes exponent, then we need to add it to the end
+ var exp = "";
+ var index = toPrecision.indexOf("e");
+ if(index != -1) {
+ // Get the exponent
+ exp = toPrecision.slice(index);
+ // Remove the exponent in case we need to zero-extend
+ toPrecision = toPrecision.slice(0, index);
}
- else if (group.options.barChart.align == 'right') {
- offset += 0.5 * coreDistance;
+ index = Math.max(toPrecision.indexOf(","), toPrecision.indexOf("."));
+ if(index === -1) {
+ // No decimal found - if we want decimals, then we need to add it
+ if(decimals !== 0) {
+ toPrecision += '.';
+ }
+ // Calculate how long the string should be
+ index = toPrecision.length + decimals;
+ }
+ else if(decimals !== 0) {
+ // Calculate how long the string should be - accounting for the decimal place
+ index += decimals + 1;
}
+ if(index > toPrecision.length) {
+ // We need to add zeros!
+ for(var cnt = index - toPrecision.length; cnt > 0; cnt--) {
+ toPrecision += '0';
+ }
+ }
+ else {
+ // we need to remove characters
+ toPrecision = toPrecision.slice(0, index);
+ }
+ // Add the exponent if there is one
+ toPrecision += exp;
}
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;
+ if (toPrecision.indexOf(",") != -1 || toPrecision.indexOf(".") != -1) {
+ // If no decimal is specified, and there are decimal places, remove trailing zeros
+ 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;
+ }
+ }
}
}
- return {width: width, offset: offset};
+ return toPrecision;
};
- Bargraph.getStackedBarYRange = function(barCombinedData, groupRanges, groupIds, groupLabel, orientation) {
- if (barCombinedData.length > 0) {
- // sort by time and by group
- barCombinedData.sort(function (a, b) {
- if (a.x == b.x) {
- return a.groupId - b.groupId;
- } else {
- return a.x - b.x;
- }
- });
- var intersections = {};
- Bargraph._getDataIntersections(intersections, barCombinedData);
- groupRanges[groupLabel] = Bargraph._getStackedBarYRange(intersections, barCombinedData);
- groupRanges[groupLabel].yAxisOrientation = orientation;
- groupIds.push(groupLabel);
- }
- }
- Bargraph._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;
- }
- }
+ /**
+ * 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) {
- return {min: yMin, max: yMax};
};
- module.exports = Bargraph;
+ /**
+ * 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.
+ */
+ DataStep.prototype.isMajor = function() {
+ return (this.current % (this.scale * this.majorSteps[this.stepIndex]) == 0);
+ };
+
+ module.exports = DataStep;
+
/***/ },
-/* 49 */
+/* 46 */
/***/ function(module, exports, __webpack_require__) {
var util = __webpack_require__(1);
var DOMutil = __webpack_require__(6);
- var Component = __webpack_require__(23);
+ var Line = __webpack_require__(47);
+ var Bar = __webpack_require__(49);
+ var Points = __webpack_require__(48);
/**
- * Legend for Graph2d
+ * /**
+ * @param {object} group | the object of the group from the dataset
+ * @param {string} groupId | ID of the group
+ * @param {object} options | the default options
+ * @param {array} groupsUsingDefaultStyles | this array has one entree.
+ * It is passed as an array so it is passed by reference.
+ * It enumerates through the default styles
+ * @constructor
*/
- 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
- }
+ 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.side = side;
- this.options = util.extend({},this.defaultOptions);
- this.linegraphOptions = linegraphOptions;
-
- this.svgElements = {};
- this.dom = {};
- this.groups = {};
- this.amountOfGroups = 0;
- this._create();
-
- this.setOptions(options);
- }
-
- Legend.prototype = new Component();
-
- Legend.prototype.clear = function() {
- this.groups = {};
- this.amountOfGroups = 0;
+ this.itemsData = [];
+ this.visible = group.visible === undefined ? true : group.visible;
}
- Legend.prototype.addGroup = function(label, graphOptions) {
- if (!this.groups.hasOwnProperty(label)) {
- this.groups[label] = graphOptions;
+ /**
+ * this loads a reference to all items in this group into this group.
+ * @param {array} items
+ */
+ 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.itemsData = [];
}
- this.amountOfGroups += 1;
};
- Legend.prototype.updateGroup = function(label, graphOptions) {
- this.groups[label] = graphOptions;
+
+ /**
+ * this is used for plotting barcharts, this way, we only have to calculate it once.
+ * @param pos
+ */
+ GraphGroup.prototype.setZeroPosition = function(pos) {
+ this.zeroPosition = pos;
};
- Legend.prototype.removeGroup = function(label) {
- if (this.groups.hasOwnProperty(label)) {
- delete this.groups[label];
- this.amountOfGroups -= 1;
- }
- };
- 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";
+ /**
+ * set the options of the graph group over the default options.
+ * @param options
+ */
+ GraphGroup.prototype.setOptions = function(options) {
+ if (options !== undefined) {
+ var fields = ['sampling','style','sort','yAxisOrientation','barChart'];
+ util.selectiveDeepExtend(fields, this.options, options);
- this.dom.textArea = document.createElement('div');
- this.dom.textArea.className = 'legendText';
- this.dom.textArea.style.position = "relative";
- this.dom.textArea.style.top = "0px";
+ util.mergeOptions(this.options, options,'catmullRom');
+ util.mergeOptions(this.options, options,'drawPoints');
+ util.mergeOptions(this.options, options,'shaded');
- 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%';
+ 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;
+ }
+ }
+ }
+ }
+ }
- this.dom.frame.appendChild(this.svg);
- this.dom.frame.appendChild(this.dom.textArea);
+ if (this.options.style == 'line') {
+ this.type = new Line(this.id, this.options);
+ }
+ else if (this.options.style == 'bar') {
+ this.type = new Bar(this.id, this.options);
+ }
+ else if (this.options.style == 'points') {
+ this.type = new Points(this.id, this.options);
+ }
};
+
/**
- * Hide the component from the DOM
+ * this updates the current group class with the latest group dataset entree, used in _updateGroup in linegraph
+ * @param group
*/
- Legend.prototype.hide = function() {
- // remove the frame containing the items
- if (this.dom.frame.parentNode) {
- this.dom.frame.parentNode.removeChild(this.dom.frame);
- }
+ 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.style = group.style;
+ this.setOptions(group.options);
};
+
/**
- * Show the component in the DOM (when not already visible).
- * @return {Boolean} changed
+ * draw the icon for the legend.
+ *
+ * @param x
+ * @param y
+ * @param JSONcontainer
+ * @param SVGcontainer
+ * @param iconWidth
+ * @param iconHeight
*/
- Legend.prototype.show = function() {
- // show frame containing the items
- if (!this.dom.frame.parentNode) {
- this.body.dom.center.appendChild(this.dom.frame);
- }
- };
+ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, iconWidth, iconHeight) {
+ var fillHeight = iconHeight * 0.5;
+ var path, fillPath;
- Legend.prototype.setOptions = function(options) {
- var fields = ['enabled','orientation','icons','left','right'];
- util.selectiveDeepExtend(fields, this.options, options);
- };
+ 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");
- 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.style == 'line') {
+ path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
+ path.setAttributeNS(null, "class", this.className);
+ if(this.style !== undefined) {
+ path.setAttributeNS(null, "style", this.style);
}
- }
- 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 = '';
+ 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");
}
- 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 {
- var scrollableHeight = this.body.domProps.center.height - this.body.domProps.centerContainer.height;
- this.dom.frame.style.bottom = 4 + scrollableHeight + Number(this.body.dom.center.style.top.replace("px","")) + 'px';
- this.dom.frame.style.top = '';
+ if (this.options.drawPoints.enabled == true) {
+ DOMutil.drawPoint(x + 0.5 * iconWidth,y, this, JSONcontainer, SVGcontainer);
}
+ }
+ else {
+ var barWidth = Math.round(0.3 * iconWidth);
+ var bar1Height = Math.round(0.4 * iconHeight);
+ var bar2Height = Math.round(0.75 * iconHeight);
- 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();
- }
+ var offset = Math.round((iconWidth - (2 * barWidth))/3);
- 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';
+ 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);
}
};
- 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;
- this.svg.style.width = iconWidth + 5 + iconOffset + 'px';
+ /**
+ * return the legend entree for this group.
+ *
+ * @param iconWidth
+ * @param iconHeight
+ * @returns {{icon: HTMLElement, label: (group.content|*|string), orientation: (.options.yAxisOrientation|*)}}
+ */
+ 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};
+ }
- 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;
- }
- }
- }
+ GraphGroup.prototype.getYRange = function(groupData) {
+ return this.type.getYRange(groupData);
+ }
- DOMutil.cleanupElements(this.svgElements);
- }
- };
+ GraphGroup.prototype.draw = function(dataset, group, framework) {
+ this.type.draw(dataset, group, framework);
+ }
- module.exports = Legend;
+
+ module.exports = GraphGroup;
/***/ },
-/* 50 */
+/* 47 */
/***/ function(module, exports, __webpack_require__) {
- var moment = __webpack_require__(2);
- var DateUtil = __webpack_require__(24);
- var util = __webpack_require__(1);
-
/**
- * @constructor TimeStep
- * The class TimeStep is an iterator for dates. You provide a start date and an
- * end date. 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 TimeStep 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
+ * Created by Alex on 11/11/2014.
*/
- function TimeStep(start, end, minimumStep, hiddenDates) {
- // variables
- this.current = new Date();
- this._start = new Date();
- this._end = new Date();
-
- this.autoScale = true;
- this.scale = 'day';
- this.step = 1;
-
- // initialize the range
- this.setRange(start, end, minimumStep);
-
- // hidden Dates options
- this.switchedDay = false;
- this.switchedMonth = false;
- this.switchedYear = false;
- this.hiddenDates = hiddenDates;
- if (hiddenDates === undefined) {
- this.hiddenDates = [];
- }
+ var DOMutil = __webpack_require__(6);
+ var Points = __webpack_require__(48);
- this.format = TimeStep.FORMAT; // default formatting
+ function Line(groupId, options) {
+ this.groupId = groupId;
+ this.options = options;
}
- // Time formatting
- TimeStep.FORMAT = {
- minorLabels: {
- millisecond:'SSS',
- second: 's',
- minute: 'HH:mm',
- hour: 'HH:mm',
- weekday: 'ddd D',
- day: 'D',
- month: 'MMM',
- year: 'YYYY'
- },
- majorLabels: {
- millisecond:'HH:mm:ss',
- second: 'D MMMM HH:mm',
- minute: 'ddd D MMMM',
- hour: 'ddd D MMMM',
- weekday: 'MMMM YYYY',
- day: 'MMMM YYYY',
- month: 'YYYY',
- year: ''
+ Line.prototype.getYRange = function(groupData) {
+ var yMin = groupData[0].y;
+ var yMax = groupData[0].y;
+ for (var j = 0; j < groupData.length; j++) {
+ yMin = yMin > groupData[j].y ? groupData[j].y : yMin;
+ yMax = yMax < groupData[j].y ? groupData[j].y : yMax;
}
+ return {min: yMin, max: yMax, yAxisOrientation: this.options.yAxisOrientation};
};
- /**
- * Set custom formatting for the minor an major labels of the TimeStep.
- * Both `minorLabels` and `majorLabels` are an Object with properties:
- * 'millisecond, 'second, 'minute', 'hour', 'weekday, 'day, 'month, 'year'.
- * @param {{minorLabels: Object, majorLabels: Object}} format
- */
- TimeStep.prototype.setFormat = function (format) {
- var defaultFormat = util.deepExtend({}, TimeStep.FORMAT);
- this.format = util.deepExtend(defaultFormat, format);
- };
/**
- * 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 {Date} [start] The start date and time.
- * @param {Date} [end] The end date and time.
- * @param {int} [minimumStep] Optional. Minimum step size in milliseconds
+ * draw a line graph
+ *
+ * @param dataset
+ * @param group
*/
- TimeStep.prototype.setRange = function(start, end, minimumStep) {
- if (!(start instanceof Date) || !(end instanceof Date)) {
- throw "No legal start or end date in method setRange";
- }
+ Line.prototype.draw = function (dataset, group, framework) {
+ if (dataset != null) {
+ if (dataset.length > 0) {
+ var path, d;
+ var svgHeight = Number(framework.svg.style.height.replace('px',''));
+ path = DOMutil.getSVGElement('path', framework.svgElements, framework.svg);
+ path.setAttributeNS(null, "class", group.className);
+ if(group.style !== undefined) {
+ path.setAttributeNS(null, "style", group.style);
+ }
- this._start = (start != undefined) ? new Date(start.valueOf()) : new Date();
- this._end = (end != undefined) ? new Date(end.valueOf()) : new Date();
+ // construct path from dataset
+ if (group.options.catmullRom.enabled == true) {
+ d = Line._catmullRom(dataset, group);
+ }
+ else {
+ d = Line._linear(dataset);
+ }
- if (this.autoScale) {
- this.setMinimumStep(minimumStep);
+ // append with points for fill and finalize the path
+ if (group.options.shaded.enabled == true) {
+ var fillPath = DOMutil.getSVGElement('path', framework.svgElements, framework.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");
+ if(group.options.shaded.style !== undefined) {
+ fillPath.setAttributeNS(null, "style", group.options.shaded.style);
+ }
+ fillPath.setAttributeNS(null, "d", dFill);
+ }
+ // copy properties to path for drawing.
+ path.setAttributeNS(null, 'd', 'M' + d);
+
+ // draw points
+ if (group.options.drawPoints.enabled == true) {
+ Points.draw(dataset, group, framework);
+ }
+ }
}
};
- /**
- * Set the range iterator to the start date.
- */
- TimeStep.prototype.first = function() {
- this.current = new Date(this._start.valueOf());
- this.roundToMinor();
- };
+
/**
- * Round the current date to the first minor date value
- * This must be executed once when the current date is set to start Date
+ * 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
*/
- TimeStep.prototype.roundToMinor = function() {
- // round to floor
- // IMPORTANT: we have no breaks in this switch! (this is no bug)
- // noinspection FallThroughInSwitchStatementJS
- switch (this.scale) {
- case 'year':
- this.current.setFullYear(this.step * Math.floor(this.current.getFullYear() / this.step));
- this.current.setMonth(0);
- case 'month': this.current.setDate(1);
- case 'day': // intentional fall through
- case 'weekday': this.current.setHours(0);
- case 'hour': this.current.setMinutes(0);
- case 'minute': this.current.setSeconds(0);
- case 'second': this.current.setMilliseconds(0);
- //case 'millisecond': // nothing to do for milliseconds
- }
+ Line._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.step != 1) {
- // round down to the first minor value that is a multiple of the current step size
- switch (this.scale) {
- case 'millisecond': this.current.setMilliseconds(this.current.getMilliseconds() - this.current.getMilliseconds() % this.step); break;
- case 'second': this.current.setSeconds(this.current.getSeconds() - this.current.getSeconds() % this.step); break;
- case 'minute': this.current.setMinutes(this.current.getMinutes() - this.current.getMinutes() % this.step); break;
- case 'hour': this.current.setHours(this.current.getHours() - this.current.getHours() % this.step); break;
- case 'weekday': // intentional fall through
- case 'day': this.current.setDate((this.current.getDate()-1) - (this.current.getDate()-1) % this.step + 1); break;
- case 'month': this.current.setMonth(this.current.getMonth() - this.current.getMonth() % this.step); break;
- case 'year': this.current.setFullYear(this.current.getFullYear() - this.current.getFullYear() % this.step); break;
- default: break;
- }
+ 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 };
+
+ d += 'C' +
+ bp1.x + ',' +
+ bp1.y + ' ' +
+ bp2.x + ',' +
+ bp2.y + ' ' +
+ p2.x + ',' +
+ p2.y + ' ';
}
- };
- /**
- * Check if the there is a next step
- * @return {boolean} true if the current date has not passed the end date
- */
- TimeStep.prototype.hasNext = function () {
- return (this.current.valueOf() <= this._end.valueOf());
+ return d;
};
/**
- * Do the next step
+ * 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
+ * @param group
+ * @returns {string}
+ * @private
*/
- TimeStep.prototype.next = function() {
- var prev = this.current.valueOf();
-
- // Two cases, needed to prevent issues with switching daylight savings
- // (end of March and end of October)
- if (this.current.getMonth() < 6) {
- switch (this.scale) {
- case 'millisecond':
-
- this.current = new Date(this.current.valueOf() + this.step); break;
- case 'second': this.current = new Date(this.current.valueOf() + this.step * 1000); break;
- case 'minute': this.current = new Date(this.current.valueOf() + this.step * 1000 * 60); break;
- case 'hour':
- this.current = new Date(this.current.valueOf() + this.step * 1000 * 60 * 60);
- // in case of skipping an hour for daylight savings, adjust the hour again (else you get: 0h 5h 9h ... instead of 0h 4h 8h ...)
- var h = this.current.getHours();
- this.current.setHours(h - (h % this.step));
- break;
- case 'weekday': // intentional fall through
- case 'day': this.current.setDate(this.current.getDate() + this.step); break;
- case 'month': this.current.setMonth(this.current.getMonth() + this.step); break;
- case 'year': this.current.setFullYear(this.current.getFullYear() + this.step); break;
- default: break;
- }
+ Line._catmullRom = function(data, group) {
+ var alpha = group.options.catmullRom.alpha;
+ if (alpha == 0 || alpha === undefined) {
+ return this._catmullRomUniform(data);
}
else {
- switch (this.scale) {
- case 'millisecond': this.current = new Date(this.current.valueOf() + this.step); break;
- case 'second': this.current.setSeconds(this.current.getSeconds() + this.step); break;
- case 'minute': this.current.setMinutes(this.current.getMinutes() + this.step); break;
- case 'hour': this.current.setHours(this.current.getHours() + this.step); break;
- case 'weekday': // intentional fall through
- case 'day': this.current.setDate(this.current.getDate() + this.step); break;
- case 'month': this.current.setMonth(this.current.getMonth() + this.step); break;
- case 'year': this.current.setFullYear(this.current.getFullYear() + this.step); break;
- default: break;
- }
- }
+ 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++) {
- if (this.step != 1) {
- // round down to the correct major value
- switch (this.scale) {
- case 'millisecond': if(this.current.getMilliseconds() < this.step) this.current.setMilliseconds(0); break;
- case 'second': if(this.current.getSeconds() < this.step) this.current.setSeconds(0); break;
- case 'minute': if(this.current.getMinutes() < this.step) this.current.setMinutes(0); break;
- case 'hour': if(this.current.getHours() < this.step) this.current.setHours(0); break;
- case 'weekday': // intentional fall through
- case 'day': if(this.current.getDate() < this.step+1) this.current.setDate(1); break;
- case 'month': if(this.current.getMonth() < this.step) this.current.setMonth(0); break;
- case 'year': break; // nothing to do for year
- default: break;
+ p0 = (i == 0) ? data[0] : data[i-1];
+ p1 = data[i];
+ p2 = data[i+1];
+ p3 = (i + 2 < length) ? data[i+2] : p2;
+
+ 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));
+
+ // 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 ]
+
+ 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);
+
+ 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)};
+
+ 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 + ' ';
}
- }
- // safety mechanism: if current time is still unchanged, move to the end
- if (this.current.valueOf() == prev) {
- this.current = new Date(this._end.valueOf());
+ return d;
}
-
- DateUtil.stepOverHiddenDates(this, prev);
};
-
/**
- * Get the current datetime
- * @return {Date} current The current date
+ * this generates the SVG path for a linear drawing between datapoints.
+ * @param data
+ * @returns {string}
+ * @private
*/
- TimeStep.prototype.getCurrent = function() {
- return this.current;
+ Line._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;
};
- /**
- * Set a custom scale. Autoscaling will be disabled.
- * For example setScale(SCALE.MINUTES, 5) will result
- * in minor steps of 5 minutes, and major steps of an hour.
- *
- * @param {string} newScale
- * A scale. Choose from 'millisecond, 'second,
- * 'minute', 'hour', 'weekday, 'day, 'month, 'year'.
- * @param {Number} newStep A step size, by default 1. Choose for
- * example 1, 2, 5, or 10.
- */
- TimeStep.prototype.setScale = function(newScale, newStep) {
- this.scale = newScale;
+ module.exports = Line;
- if (newStep > 0) {
- this.step = newStep;
- }
- this.autoScale = false;
- };
+/***/ },
+/* 48 */
+/***/ function(module, exports, __webpack_require__) {
/**
- * Enable or disable autoscaling
- * @param {boolean} enable If true, autoascaling is set true
+ * Created by Alex on 11/11/2014.
*/
- TimeStep.prototype.setAutoScale = function (enable) {
- this.autoScale = enable;
+ var DOMutil = __webpack_require__(6);
+
+ function Points(groupId, options) {
+ this.groupId = groupId;
+ this.options = options;
+ }
+
+
+ Points.prototype.getYRange = function(groupData) {
+ var yMin = groupData[0].y;
+ var yMax = groupData[0].y;
+ for (var j = 0; j < groupData.length; j++) {
+ yMin = yMin > groupData[j].y ? groupData[j].y : yMin;
+ yMax = yMax < groupData[j].y ? groupData[j].y : yMax;
+ }
+ return {min: yMin, max: yMax, yAxisOrientation: this.options.yAxisOrientation};
};
+ Points.prototype.draw = function(dataset, group, framework, offset) {
+ Points.draw(dataset, group, framework, offset);
+ }
/**
- * Automatically determine the scale that bests fits the provided minimum step
- * @param {Number} [minimumStep] The minimum step size in milliseconds
+ * draw the data points
+ *
+ * @param {Array} dataset
+ * @param {Object} JSONcontainer
+ * @param {Object} svg | SVG DOM element
+ * @param {GraphGroup} group
+ * @param {Number} [offset]
*/
- TimeStep.prototype.setMinimumStep = function(minimumStep) {
- if (minimumStep == undefined) {
- return;
+ Points.draw = function (dataset, group, framework, offset) {
+ if (offset === undefined) {offset = 0;}
+ for (var i = 0; i < dataset.length; i++) {
+ DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, group, framework.svgElements, framework.svg);
}
+ };
- //var b = asc + ds;
- var stepYear = (1000 * 60 * 60 * 24 * 30 * 12);
- var stepMonth = (1000 * 60 * 60 * 24 * 30);
- var stepDay = (1000 * 60 * 60 * 24);
- var stepHour = (1000 * 60 * 60);
- var stepMinute = (1000 * 60);
- var stepSecond = (1000);
- var stepMillisecond= (1);
+ module.exports = Points;
- // find the smallest step that is larger than the provided minimumStep
- if (stepYear*1000 > minimumStep) {this.scale = 'year'; this.step = 1000;}
- if (stepYear*500 > minimumStep) {this.scale = 'year'; this.step = 500;}
- if (stepYear*100 > minimumStep) {this.scale = 'year'; this.step = 100;}
- if (stepYear*50 > minimumStep) {this.scale = 'year'; this.step = 50;}
- if (stepYear*10 > minimumStep) {this.scale = 'year'; this.step = 10;}
- if (stepYear*5 > minimumStep) {this.scale = 'year'; this.step = 5;}
- if (stepYear > minimumStep) {this.scale = 'year'; this.step = 1;}
- if (stepMonth*3 > minimumStep) {this.scale = 'month'; this.step = 3;}
- if (stepMonth > minimumStep) {this.scale = 'month'; this.step = 1;}
- if (stepDay*5 > minimumStep) {this.scale = 'day'; this.step = 5;}
- if (stepDay*2 > minimumStep) {this.scale = 'day'; this.step = 2;}
- if (stepDay > minimumStep) {this.scale = 'day'; this.step = 1;}
- if (stepDay/2 > minimumStep) {this.scale = 'weekday'; this.step = 1;}
- if (stepHour*4 > minimumStep) {this.scale = 'hour'; this.step = 4;}
- if (stepHour > minimumStep) {this.scale = 'hour'; this.step = 1;}
- if (stepMinute*15 > minimumStep) {this.scale = 'minute'; this.step = 15;}
- if (stepMinute*10 > minimumStep) {this.scale = 'minute'; this.step = 10;}
- if (stepMinute*5 > minimumStep) {this.scale = 'minute'; this.step = 5;}
- if (stepMinute > minimumStep) {this.scale = 'minute'; this.step = 1;}
- if (stepSecond*15 > minimumStep) {this.scale = 'second'; this.step = 15;}
- if (stepSecond*10 > minimumStep) {this.scale = 'second'; this.step = 10;}
- if (stepSecond*5 > minimumStep) {this.scale = 'second'; this.step = 5;}
- if (stepSecond > minimumStep) {this.scale = 'second'; this.step = 1;}
- if (stepMillisecond*200 > minimumStep) {this.scale = 'millisecond'; this.step = 200;}
- if (stepMillisecond*100 > minimumStep) {this.scale = 'millisecond'; this.step = 100;}
- if (stepMillisecond*50 > minimumStep) {this.scale = 'millisecond'; this.step = 50;}
- if (stepMillisecond*10 > minimumStep) {this.scale = 'millisecond'; this.step = 10;}
- if (stepMillisecond*5 > minimumStep) {this.scale = 'millisecond'; this.step = 5;}
- if (stepMillisecond > minimumStep) {this.scale = 'millisecond'; this.step = 1;}
- };
+/***/ },
+/* 49 */
+/***/ function(module, exports, __webpack_require__) {
/**
- * 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
+ * Created by Alex on 11/11/2014.
*/
- TimeStep.prototype.snap = function(date) {
- var clone = new Date(date.valueOf());
+ var DOMutil = __webpack_require__(6);
+ var Points = __webpack_require__(48);
- if (this.scale == 'year') {
- var year = clone.getFullYear() + Math.round(clone.getMonth() / 12);
- clone.setFullYear(Math.round(year / this.step) * this.step);
- clone.setMonth(0);
- clone.setDate(0);
- clone.setHours(0);
- clone.setMinutes(0);
- clone.setSeconds(0);
- clone.setMilliseconds(0);
- }
- else if (this.scale == 'month') {
- if (clone.getDate() > 15) {
- clone.setDate(1);
- clone.setMonth(clone.getMonth() + 1);
- // important: first set Date to 1, after that change the month.
- }
- else {
- clone.setDate(1);
- }
+ function Bargraph(groupId, options) {
+ this.groupId = groupId;
+ this.options = options;
+ }
- clone.setHours(0);
- clone.setMinutes(0);
- clone.setSeconds(0);
- clone.setMilliseconds(0);
+ Bargraph.prototype.getYRange = function(groupData) {
+ if (this.options.barChart.handleOverlap != 'stack') {
+ var yMin = groupData[0].y;
+ var yMax = groupData[0].y;
+ for (var j = 0; j < groupData.length; j++) {
+ yMin = yMin > groupData[j].y ? groupData[j].y : yMin;
+ yMax = yMax < groupData[j].y ? groupData[j].y : yMax;
+ }
+ return {min: yMin, max: yMax, yAxisOrientation: this.options.yAxisOrientation};
}
- else if (this.scale == 'day') {
- //noinspection FallthroughInSwitchStatementJS
- switch (this.step) {
- case 5:
- case 2:
- clone.setHours(Math.round(clone.getHours() / 24) * 24); break;
- default:
- clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
- }
- clone.setMinutes(0);
- clone.setSeconds(0);
- clone.setMilliseconds(0);
- }
- else if (this.scale == 'weekday') {
- //noinspection FallthroughInSwitchStatementJS
- switch (this.step) {
- case 5:
- case 2:
- clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
- default:
- clone.setHours(Math.round(clone.getHours() / 6) * 6); break;
- }
- clone.setMinutes(0);
- clone.setSeconds(0);
- clone.setMilliseconds(0);
- }
- else if (this.scale == 'hour') {
- switch (this.step) {
- case 4:
- clone.setMinutes(Math.round(clone.getMinutes() / 60) * 60); break;
- default:
- clone.setMinutes(Math.round(clone.getMinutes() / 30) * 30); break;
- }
- clone.setSeconds(0);
- clone.setMilliseconds(0);
- } else if (this.scale == 'minute') {
- //noinspection FallthroughInSwitchStatementJS
- switch (this.step) {
- case 15:
- case 10:
- clone.setMinutes(Math.round(clone.getMinutes() / 5) * 5);
- clone.setSeconds(0);
- break;
- case 5:
- clone.setSeconds(Math.round(clone.getSeconds() / 60) * 60); break;
- default:
- clone.setSeconds(Math.round(clone.getSeconds() / 30) * 30); break;
- }
- clone.setMilliseconds(0);
- }
- else if (this.scale == 'second') {
- //noinspection FallthroughInSwitchStatementJS
- switch (this.step) {
- case 15:
- case 10:
- clone.setSeconds(Math.round(clone.getSeconds() / 5) * 5);
- clone.setMilliseconds(0);
- break;
- case 5:
- clone.setMilliseconds(Math.round(clone.getMilliseconds() / 1000) * 1000); break;
- default:
- clone.setMilliseconds(Math.round(clone.getMilliseconds() / 500) * 500); break;
+ else {
+ var barCombinedData = [];
+ for (var j = 0; j < groupData.length; j++) {
+ barCombinedData.push({
+ x: groupData[j].x,
+ y: groupData[j].y,
+ groupId: this.groupId
+ });
}
+ return barCombinedData;
}
- else if (this.scale == 'millisecond') {
- var step = this.step > 5 ? this.step / 2 : 1;
- clone.setMilliseconds(Math.round(clone.getMilliseconds() / step) * step);
- }
-
- return clone;
};
+
+
/**
- * 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.
+ * draw a bar graph
+ *
+ * @param groupIds
+ * @param processedGroupData
*/
- TimeStep.prototype.isMajor = function() {
- if (this.switchedYear == true) {
- this.switchedYear = false;
- switch (this.scale) {
- case 'year':
- case 'month':
- case 'weekday':
- case 'day':
- case 'hour':
- case 'minute':
- case 'second':
- case 'millisecond':
- return true;
- default:
- return false;
+ Bargraph.draw = function (groupIds, processedGroupData, framework) {
+ var combinedData = [];
+ var intersections = {};
+ var coreDistance;
+ var key, drawData;
+ var group;
+ var i,j;
+ var barPoints = 0;
+
+ // combine all barchart data
+ for (i = 0; i < groupIds.length; i++) {
+ group = framework.groups[groupIds[i]];
+ if (group.options.style == 'bar') {
+ if (group.visible == true && (framework.options.groups.visibility[groupIds[i]] === undefined || framework.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;
+ }
+ }
}
}
- else if (this.switchedMonth == true) {
- this.switchedMonth = false;
- switch (this.scale) {
- case 'weekday':
- case 'day':
- case 'hour':
- case 'minute':
- case 'second':
- case 'millisecond':
- return true;
- default:
- return false;
+
+ if (barPoints == 0) {return;}
+
+ // 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;
}
- }
- else if (this.switchedDay == true) {
- this.switchedDay = false;
- switch (this.scale) {
- case 'millisecond':
- case 'second':
- case 'minute':
- case 'hour':
- return true;
- default:
- return false;
+ });
+
+ // get intersections
+ Bargraph._getDataIntersections(intersections, combinedData);
+
+ // plot barchart
+ for (i = 0; i < combinedData.length; i++) {
+ group = framework.groups[combinedData[i].groupId];
+ var minWidth = 0.1 * group.options.barChart.width;
+
+ 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 = Bargraph._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 = Bargraph._getSafeDrawData(coreDistance, group, minWidth);
+ intersections[key].resolved += 1;
- switch (this.scale) {
- case 'millisecond':
- return (this.current.getMilliseconds() == 0);
- case 'second':
- return (this.current.getSeconds() == 0);
- case 'minute':
- return (this.current.getHours() == 0) && (this.current.getMinutes() == 0);
- case 'hour':
- return (this.current.getHours() == 0);
- case 'weekday': // intentional fall through
- case 'day':
- return (this.current.getDate() == 1);
- case 'month':
- return (this.current.getMonth() == 0);
- case 'year':
- return false;
- default:
- return false;
+ 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', framework.svgElements, framework.svg);
+ // draw points
+ if (group.options.drawPoints.enabled == true) {
+ DOMutil.drawPoint(combinedData[i].x + drawData.offset, combinedData[i].y, group, framework.svgElements, framework.svg);
+ }
}
};
/**
- * Returns formatted text for the minor axislabel, depending on the current
- * date and the scale. For example when scale is MINUTE, the current time is
- * formatted as "hh:mm".
- * @param {Date} [date] custom date. if not provided, current date is taken
+ * Fill the intersections object with counters of how many datapoints share the same x coordinates
+ * @param intersections
+ * @param combinedData
+ * @private
*/
- TimeStep.prototype.getLabelMinor = function(date) {
- if (date == undefined) {
- date = this.current;
+ Bargraph._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};
+ }
+ intersections[combinedData[i].x].amount += 1;
+ }
}
-
- var format = this.format.minorLabels[this.scale];
- return (format && format.length > 0) ? moment(date).format(format) : '';
};
+
/**
- * Returns formatted text for the major axis label, depending on the current
- * date and the scale. For example when scale is MINUTE, the major scale is
- * hours, and the hour will be formatted as "hh".
- * @param {Date} [date] custom date. if not provided, current date is taken
+ * 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
*/
- TimeStep.prototype.getLabelMajor = function(date) {
- if (date == undefined) {
- date = this.current;
+ Bargraph._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;
+ }
+ }
+ 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;
+ }
}
- var format = this.format.majorLabels[this.scale];
- return (format && format.length > 0) ? moment(date).format(format) : '';
+ return {width: width, offset: offset};
};
- module.exports = TimeStep;
+ Bargraph.getStackedBarYRange = function(barCombinedData, groupRanges, groupIds, groupLabel, orientation) {
+ if (barCombinedData.length > 0) {
+ // sort by time and by group
+ barCombinedData.sort(function (a, b) {
+ if (a.x == b.x) {
+ return a.groupId - b.groupId;
+ } else {
+ return a.x - b.x;
+ }
+ });
+ var intersections = {};
+
+ Bargraph._getDataIntersections(intersections, barCombinedData);
+ groupRanges[groupLabel] = Bargraph._getStackedBarYRange(intersections, barCombinedData);
+ groupRanges[groupLabel].yAxisOrientation = orientation;
+ groupIds.push(groupLabel);
+ }
+ }
+
+ Bargraph._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;
+ }
+ }
+ return {min: yMin, max: yMax};
+ };
+
+ module.exports = Bargraph;
/***/ },
-/* 51 */
+/* 50 */
/***/ function(module, exports, __webpack_require__) {
- var Emitter = __webpack_require__(11);
- var Hammer = __webpack_require__(19);
- var keycharm = __webpack_require__(36);
var util = __webpack_require__(1);
- var hammerUtil = __webpack_require__(22);
- var DataSet = __webpack_require__(7);
- var DataView = __webpack_require__(9);
- var dotparser = __webpack_require__(52);
- var gephiParser = __webpack_require__(53);
- var Groups = __webpack_require__(54);
- var Images = __webpack_require__(55);
- var Node = __webpack_require__(56);
- var Edge = __webpack_require__(57);
- var Popup = __webpack_require__(58);
- var MixinLoader = __webpack_require__(59);
- var Activator = __webpack_require__(35);
- var locales = __webpack_require__(70);
+ var DOMutil = __webpack_require__(6);
+ var Component = __webpack_require__(23);
- // Load custom shapes into CanvasRenderingContext2D
- __webpack_require__(71);
+ /**
+ * 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;
+
+ this.svgElements = {};
+ this.dom = {};
+ this.groups = {};
+ this.amountOfGroups = 0;
+ this._create();
+
+ this.setOptions(options);
+ }
+
+ Legend.prototype = new Component();
+
+ Legend.prototype.clear = function() {
+ this.groups = {};
+ this.amountOfGroups = 0;
+ }
+
+ Legend.prototype.addGroup = function(label, graphOptions) {
+
+ if (!this.groups.hasOwnProperty(label)) {
+ this.groups[label] = graphOptions;
+ }
+ this.amountOfGroups += 1;
+ };
+
+ Legend.prototype.updateGroup = function(label, graphOptions) {
+ this.groups[label] = graphOptions;
+ };
+
+ Legend.prototype.removeGroup = function(label) {
+ if (this.groups.hasOwnProperty(label)) {
+ delete this.groups[label];
+ this.amountOfGroups -= 1;
+ }
+ };
+
+ 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);
+ };
/**
- * @constructor Network
- * Create a network visualization, displaying nodes and edges.
- *
- * @param {Element} container The DOM element in which the Network will
- * be created. Normally a div element.
- * @param {Object} data An object containing parameters
- * {Array} nodes
- * {Array} edges
- * @param {Object} options Options
+ * Hide the component from the DOM
*/
- function Network (container, data, options) {
- if (!(this instanceof Network)) {
- throw new SyntaxError('Constructor must be called with the new operator');
+ Legend.prototype.hide = function() {
+ // remove the frame containing the items
+ if (this.dom.frame.parentNode) {
+ this.dom.frame.parentNode.removeChild(this.dom.frame);
}
+ };
- this._determineBrowserMethod();
- this._initializeMixinLoaders();
+ /**
+ * 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);
+ }
+ };
- // create variables and set default values
- this.containerElement = container;
+ Legend.prototype.setOptions = function(options) {
+ var fields = ['enabled','orientation','icons','left','right'];
+ util.selectiveDeepExtend(fields, this.options, options);
+ };
- // render and calculation settings
- this.renderRefreshRate = 60; // hz (fps)
- this.renderTimestep = 1000 / this.renderRefreshRate; // ms -- saves calculation later on
- this.renderTime = 0; // measured time it takes to render a frame
- this.physicsTime = 0; // measured time it takes to render a frame
- this.physicsDiscreteStepsize = 0.50; // discrete stepsize of the simulation
+ 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.initializing = true;
+ 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 = '';
+ }
- this.triggerFunctions = {add:null,edit:null,editEdge:null,connect:null,del:null};
+ 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 {
+ var scrollableHeight = this.body.domProps.center.height - this.body.domProps.centerContainer.height;
+ this.dom.frame.style.bottom = 4 + scrollableHeight + Number(this.body.dom.center.style.top.replace("px","")) + 'px';
+ this.dom.frame.style.top = '';
+ }
- // set constant values
- this.defaultOptions = {
- nodes: {
+ 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();
+ }
+
+ 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';
+ }
+ };
+
+ 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;
+
+ this.svg.style.width = iconWidth + 5 + iconOffset + 'px';
+
+ 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;
+ }
+ }
+ }
+
+ DOMutil.cleanupElements(this.svgElements);
+ }
+ };
+
+ module.exports = Legend;
+
+
+/***/ },
+/* 51 */
+/***/ function(module, exports, __webpack_require__) {
+
+ var Emitter = __webpack_require__(11);
+ var Hammer = __webpack_require__(19);
+ var keycharm = __webpack_require__(36);
+ var util = __webpack_require__(1);
+ var hammerUtil = __webpack_require__(22);
+ var DataSet = __webpack_require__(7);
+ var DataView = __webpack_require__(9);
+ var dotparser = __webpack_require__(57);
+ var gephiParser = __webpack_require__(58);
+ var Groups = __webpack_require__(54);
+ var Images = __webpack_require__(55);
+ var Node = __webpack_require__(53);
+ var Edge = __webpack_require__(52);
+ var Popup = __webpack_require__(56);
+ var MixinLoader = __webpack_require__(59);
+ var Activator = __webpack_require__(35);
+ var locales = __webpack_require__(70);
+
+ // Load custom shapes into CanvasRenderingContext2D
+ __webpack_require__(71);
+
+ /**
+ * @constructor Network
+ * Create a network visualization, displaying nodes and edges.
+ *
+ * @param {Element} container The DOM element in which the Network will
+ * be created. Normally a div element.
+ * @param {Object} data An object containing parameters
+ * {Array} nodes
+ * {Array} edges
+ * @param {Object} options Options
+ */
+ function Network (container, data, options) {
+ if (!(this instanceof Network)) {
+ throw new SyntaxError('Constructor must be called with the new operator');
+ }
+
+ this._determineBrowserMethod();
+ this._initializeMixinLoaders();
+
+ // create variables and set default values
+ this.containerElement = container;
+
+ // render and calculation settings
+ this.renderRefreshRate = 60; // hz (fps)
+ this.renderTimestep = 1000 / this.renderRefreshRate; // ms -- saves calculation later on
+ this.renderTime = 0; // measured time it takes to render a frame
+ this.physicsTime = 0; // measured time it takes to render a frame
+ this.physicsDiscreteStepsize = 0.50; // discrete stepsize of the simulation
+
+ this.initializing = true;
+
+ this.triggerFunctions = {add:null,edit:null,editEdge:null,connect:null,del:null};
+
+ // set constant values
+ this.defaultOptions = {
+ nodes: {
mass: 1,
radiusMin: 10,
radiusMax: 30,
@@ -22721,7 +22721,7 @@ return /******/ (function(modules) { // webpackBootstrap
var network = this;
this.groups = new Groups(); // object with groups
this.images = new Images(); // object with images
- this.images.setOnloadCallback(function () {
+ this.images.setOnloadCallback(function (status) {
network._redraw();
});
@@ -22835,16 +22835,19 @@ return /******/ (function(modules) { // webpackBootstrap
// Extend Network with an Emitter mixin
Emitter(Network.prototype);
-
+ /**
+ * Determine if the browser requires a setTimeout or a requestAnimationFrame. This was required because
+ * some implementations (safari and IE9) did not support requestAnimationFrame
+ * @private
+ */
Network.prototype._determineBrowserMethod = function() {
- var ua = navigator.userAgent.toLowerCase();
-
+ var browserType = navigator.userAgent.toLowerCase();
this.requiresTimeout = false;
- if (ua.indexOf('msie 9.0') != -1) { // IE 9
+ if (browserType.indexOf('msie 9.0') != -1) { // IE 9
this.requiresTimeout = true;
}
- else if (ua.indexOf('safari') != -1) { // safari
- if (ua.indexOf('chrome') <= -1) {
+ else if (browserType.indexOf('safari') != -1) { // safari
+ if (browserType.indexOf('chrome') <= -1) {
this.requiresTimeout = true;
}
}
@@ -25138,1045 +25141,1219 @@ return /******/ (function(modules) { // webpackBootstrap
/* 52 */
/***/ function(module, exports, __webpack_require__) {
+ var util = __webpack_require__(1);
+ var Node = __webpack_require__(53);
+
/**
- * Parse a text source containing data in DOT language into a JSON object.
- * The object contains two lists: one with nodes and one with edges.
- *
- * DOT language reference: http://www.graphviz.org/doc/info/lang.html
+ * @class Edge
*
- * @param {String} data Text containing a graph in DOT-notation
- * @return {Object} graph An object containing two parameters:
- * {Object[]} nodes
- * {Object[]} edges
+ * A edge connects two nodes
+ * @param {Object} properties Object with properties. Must contain
+ * At least properties from and to.
+ * Available properties: from (number),
+ * to (number), label (string, color (string),
+ * width (number), style (string),
+ * length (number), title (string)
+ * @param {Network} network A Network object, used to find and edge to
+ * nodes.
+ * @param {Object} constants An object with default values for
+ * example for the color
*/
- function parseDOT (data) {
- dot = data;
- return parseGraph();
- }
+ function Edge (properties, network, networkConstants) {
+ if (!network) {
+ throw "No network provided";
+ }
+ var fields = ['edges','physics'];
+ var constants = util.selectiveBridgeObject(fields,networkConstants);
+ this.options = constants.edges;
+ this.physics = constants.physics;
+ this.options['smoothCurves'] = networkConstants['smoothCurves'];
- // token types enumeration
- var TOKENTYPE = {
- NULL : 0,
- DELIMITER : 1,
- IDENTIFIER: 2,
- UNKNOWN : 3
- };
- // map with all delimiters
- var DELIMITERS = {
- '{': true,
- '}': true,
- '[': true,
- ']': true,
- ';': true,
- '=': true,
- ',': true,
+ this.network = network;
- '->': true,
- '--': true
- };
+ // initialize variables
+ this.id = undefined;
+ this.fromId = undefined;
+ this.toId = undefined;
+ this.title = undefined;
+ this.widthSelected = this.options.width * this.options.widthSelectionMultiplier;
+ this.value = undefined;
+ this.selected = false;
+ this.hover = false;
+ this.labelDimensions = {top:0,left:0,width:0,height:0,yLine:0}; // could be cached
+ this.dirtyLabel = true;
- var dot = ''; // current dot file
- var index = 0; // current index in dot file
- var c = ''; // current token character in expr
- var token = ''; // current token
- var tokenType = TOKENTYPE.NULL; // type of the token
+ this.from = null; // a node
+ this.to = null; // a node
+ this.via = null; // a temp node
- /**
- * Get the first character from the dot file.
- * The character is stored into the char c. If the end of the dot file is
- * reached, the function puts an empty string in c.
- */
- function first() {
- index = 0;
- c = dot.charAt(0);
- }
+ this.fromBackup = null; // used to clean up after reconnect
+ this.toBackup = null;; // used to clean up after reconnect
- /**
- * Get the next character from the dot file.
- * The character is stored into the char c. If the end of the dot file is
- * reached, the function puts an empty string in c.
- */
- function next() {
- index++;
- c = dot.charAt(index);
- }
+ // we use this to be able to reconnect the edge to a cluster if its node is put into a cluster
+ // by storing the original information we can revert to the original connection when the cluser is opened.
+ this.originalFromId = [];
+ this.originalToId = [];
- /**
- * Preview the next character from the dot file.
- * @return {String} cNext
- */
- function nextPreview() {
- return dot.charAt(index + 1);
- }
+ this.connected = false;
- /**
- * Test whether given character is alphabetic or numeric
- * @param {String} c
- * @return {Boolean} isAlphaNumeric
- */
- var regexAlphaNumeric = /[a-zA-Z_0-9.:#]/;
- function isAlphaNumeric(c) {
- return regexAlphaNumeric.test(c);
+ this.widthFixed = false;
+ this.lengthFixed = false;
+
+ this.setProperties(properties);
+
+ this.controlNodesEnabled = false;
+ this.controlNodes = {from:null, to:null, positions:{}};
+ this.connectedNode = null;
}
/**
- * Merge all properties of object b into object b
- * @param {Object} a
- * @param {Object} b
- * @return {Object} a
+ * Set or overwrite properties for the edge
+ * @param {Object} properties an object with properties
+ * @param {Object} constants and object with default, global properties
*/
- function merge (a, b) {
- if (!a) {
- a = {};
+ Edge.prototype.setProperties = function(properties) {
+ if (!properties) {
+ return;
}
- if (b) {
- for (var name in b) {
- if (b.hasOwnProperty(name)) {
- a[name] = b[name];
- }
- }
- }
- return a;
- }
+ var fields = ['style','fontSize','fontFace','fontColor','fontFill','width',
+ 'widthSelectionMultiplier','hoverWidth','arrowScaleFactor','dash','inheritColor'
+ ];
+ util.selectiveDeepExtend(fields, this.options, properties);
- /**
- * Set a value in an object, where the provided parameter name can be a
- * path with nested parameters. For example:
- *
- * var obj = {a: 2};
- * setValue(obj, 'b.c', 3); // obj = {a: 2, b: {c: 3}}
- *
- * @param {Object} obj
- * @param {String} path A parameter name or dot-separated parameter path,
- * like "color.highlight.border".
- * @param {*} value
- */
- function setValue(obj, path, value) {
- var keys = path.split('.');
- var o = obj;
- while (keys.length) {
- var key = keys.shift();
- if (keys.length) {
- // this isn't the end point
- if (!o[key]) {
- o[key] = {};
- }
- o = o[key];
+ if (properties.from !== undefined) {this.fromId = properties.from;}
+ if (properties.to !== undefined) {this.toId = properties.to;}
+
+ if (properties.id !== undefined) {this.id = properties.id;}
+ if (properties.label !== undefined) {this.label = properties.label; this.dirtyLabel = true;}
+
+ if (properties.title !== undefined) {this.title = properties.title;}
+ if (properties.value !== undefined) {this.value = properties.value;}
+ if (properties.length !== undefined) {this.physics.springLength = properties.length;}
+
+ if (properties.color !== undefined) {
+ this.options.inheritColor = false;
+ if (util.isString(properties.color)) {
+ this.options.color.color = properties.color;
+ this.options.color.highlight = properties.color;
}
else {
- // this is the end point
- o[key] = value;
+ if (properties.color.color !== undefined) {this.options.color.color = properties.color.color;}
+ if (properties.color.highlight !== undefined) {this.options.color.highlight = properties.color.highlight;}
+ if (properties.color.hover !== undefined) {this.options.color.hover = properties.color.hover;}
}
}
- }
- /**
- * Add a node to a graph object. If there is already a node with
- * the same id, their attributes will be merged.
- * @param {Object} graph
- * @param {Object} node
- */
- function addNode(graph, node) {
- var i, len;
- var current = null;
+ // A node is connected when it has a from and to node.
+ this.connect();
- // find root graph (in case of subgraph)
- var graphs = [graph]; // list with all graphs from current graph to root graph
- var root = graph;
- while (root.parent) {
- graphs.push(root.parent);
- root = root.parent;
- }
+ this.widthFixed = this.widthFixed || (properties.width !== undefined);
+ this.lengthFixed = this.lengthFixed || (properties.length !== undefined);
- // find existing node (at root level) by its id
- if (root.nodes) {
- for (i = 0, len = root.nodes.length; i < len; i++) {
- if (node.id === root.nodes[i].id) {
- current = root.nodes[i];
- break;
- }
- }
- }
+ this.widthSelected = this.options.width* this.options.widthSelectionMultiplier;
- if (!current) {
- // this is a new node
- current = {
- id: node.id
- };
- if (graph.node) {
- // clone default attributes
- current.attr = merge(current.attr, graph.node);
- }
+ // set draw method based on style
+ switch (this.options.style) {
+ case 'line': this.draw = this._drawLine; break;
+ case 'arrow': this.draw = this._drawArrow; break;
+ case 'arrow-center': this.draw = this._drawArrowCenter; break;
+ case 'dash-line': this.draw = this._drawDashLine; break;
+ default: this.draw = this._drawLine; break;
}
+ };
- // add node to this (sub)graph and all its parent graphs
- for (i = graphs.length - 1; i >= 0; i--) {
- var g = graphs[i];
+ /**
+ * Connect an edge to its nodes
+ */
+ Edge.prototype.connect = function () {
+ this.disconnect();
- if (!g.nodes) {
- g.nodes = [];
+ this.from = this.network.nodes[this.fromId] || null;
+ this.to = this.network.nodes[this.toId] || null;
+ this.connected = (this.from && this.to);
+
+ if (this.connected) {
+ this.from.attachEdge(this);
+ this.to.attachEdge(this);
+ }
+ else {
+ if (this.from) {
+ this.from.detachEdge(this);
}
- if (g.nodes.indexOf(current) == -1) {
- g.nodes.push(current);
+ if (this.to) {
+ this.to.detachEdge(this);
}
}
-
- // merge attributes
- if (node.attr) {
- current.attr = merge(current.attr, node.attr);
- }
- }
+ };
/**
- * Add an edge to a graph object
- * @param {Object} graph
- * @param {Object} edge
+ * Disconnect an edge from its nodes
*/
- function addEdge(graph, edge) {
- if (!graph.edges) {
- graph.edges = [];
+ Edge.prototype.disconnect = function () {
+ if (this.from) {
+ this.from.detachEdge(this);
+ this.from = null;
}
- graph.edges.push(edge);
- if (graph.edge) {
- var attr = merge({}, graph.edge); // clone default attributes
- edge.attr = merge(attr, edge.attr); // merge attributes
+ if (this.to) {
+ this.to.detachEdge(this);
+ this.to = null;
}
- }
+
+ this.connected = false;
+ };
/**
- * Create an edge to a graph object
- * @param {Object} graph
- * @param {String | Number | Object} from
- * @param {String | Number | Object} to
- * @param {String} type
- * @param {Object | null} attr
- * @return {Object} edge
+ * get the title of this edge.
+ * @return {string} title The title of the edge, or undefined when no title
+ * has been set.
*/
- function createEdge(graph, from, to, type, attr) {
- var edge = {
- from: from,
- to: to,
- type: type
- };
+ Edge.prototype.getTitle = function() {
+ return typeof this.title === "function" ? this.title() : this.title;
+ };
- if (graph.edge) {
- edge.attr = merge({}, graph.edge); // clone default attributes
+
+ /**
+ * Retrieve the value of the edge. Can be undefined
+ * @return {Number} value
+ */
+ Edge.prototype.getValue = function() {
+ return this.value;
+ };
+
+ /**
+ * Adjust the value range of the edge. The edge will adjust it's width
+ * based on its value.
+ * @param {Number} min
+ * @param {Number} max
+ */
+ Edge.prototype.setValueRange = function(min, max) {
+ if (!this.widthFixed && this.value !== undefined) {
+ var scale = (this.options.widthMax - this.options.widthMin) / (max - min);
+ this.options.width= (this.value - min) * scale + this.options.widthMin;
+ this.widthSelected = this.options.width* this.options.widthSelectionMultiplier;
}
- edge.attr = merge(edge.attr || {}, attr); // merge attributes
+ };
- return edge;
- }
+ /**
+ * Redraw a edge
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ */
+ Edge.prototype.draw = function(ctx) {
+ throw "Method draw not initialized in edge";
+ };
/**
- * Get next token in the current dot file.
- * The token and token type are available as token and tokenType
+ * Check if this object is overlapping with the provided object
+ * @param {Object} obj an object with parameters left, top
+ * @return {boolean} True if location is located on the edge
*/
- function getToken() {
- tokenType = TOKENTYPE.NULL;
- token = '';
+ Edge.prototype.isOverlappingWith = function(obj) {
+ if (this.connected) {
+ var distMax = 10;
+ var xFrom = this.from.x;
+ var yFrom = this.from.y;
+ var xTo = this.to.x;
+ var yTo = this.to.y;
+ var xObj = obj.left;
+ var yObj = obj.top;
- // skip over whitespaces
- while (c == ' ' || c == '\t' || c == '\n' || c == '\r') { // space, tab, enter
- next();
+ var dist = this._getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
+
+ return (dist < distMax);
+ }
+ else {
+ return false
}
+ };
- do {
- var isComment = false;
+ Edge.prototype._getColor = function() {
+ var colorObj = this.options.color;
+ if (this.options.inheritColor == "to") {
+ colorObj = {
+ highlight: this.to.options.color.highlight.border,
+ hover: this.to.options.color.hover.border,
+ color: this.to.options.color.border
+ };
+ }
+ else if (this.options.inheritColor == "from" || this.options.inheritColor == true) {
+ colorObj = {
+ highlight: this.from.options.color.highlight.border,
+ hover: this.from.options.color.hover.border,
+ color: this.from.options.color.border
+ };
+ }
- // skip comment
- if (c == '#') {
- // find the previous non-space character
- var i = index - 1;
- while (dot.charAt(i) == ' ' || dot.charAt(i) == '\t') {
- i--;
- }
- if (dot.charAt(i) == '\n' || dot.charAt(i) == '') {
- // the # is at the start of a line, this is indeed a line comment
- while (c != '' && c != '\n') {
- next();
- }
- isComment = true;
- }
- }
- if (c == '/' && nextPreview() == '/') {
- // skip line comment
- while (c != '' && c != '\n') {
- next();
- }
- isComment = true;
- }
- if (c == '/' && nextPreview() == '*') {
- // skip block comment
- while (c != '') {
- if (c == '*' && nextPreview() == '/') {
- // end of block comment found. skip these last two characters
- next();
- next();
- break;
- }
- else {
- next();
- }
- }
- isComment = true;
- }
-
- // skip over whitespaces
- while (c == ' ' || c == '\t' || c == '\n' || c == '\r') { // space, tab, enter
- next();
- }
- }
- while (isComment);
-
- // check for end of dot file
- if (c == '') {
- // token is still empty
- tokenType = TOKENTYPE.DELIMITER;
- return;
- }
+ if (this.selected == true) {return colorObj.highlight;}
+ else if (this.hover == true) {return colorObj.hover;}
+ else {return colorObj.color;}
+ };
- // check for delimiters consisting of 2 characters
- var c2 = c + nextPreview();
- if (DELIMITERS[c2]) {
- tokenType = TOKENTYPE.DELIMITER;
- token = c2;
- next();
- next();
- return;
- }
- // check for delimiters consisting of 1 character
- if (DELIMITERS[c]) {
- tokenType = TOKENTYPE.DELIMITER;
- token = c;
- next();
- return;
- }
+ /**
+ * Redraw a edge as a line
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
+ */
+ Edge.prototype._drawLine = function(ctx) {
+ // set style
+ ctx.strokeStyle = this._getColor();
+ ctx.lineWidth = this._getLineWidth();
- // check for an identifier (number or string)
- // TODO: more precise parsing of numbers/strings (and the port separator ':')
- if (isAlphaNumeric(c) || c == '-') {
- token += c;
- next();
+ if (this.from != this.to) {
+ // draw line
+ var via = this._line(ctx);
- while (isAlphaNumeric(c)) {
- token += c;
- next();
- }
- if (token == 'false') {
- token = false; // convert to boolean
- }
- else if (token == 'true') {
- token = true; // convert to boolean
- }
- else if (!isNaN(Number(token))) {
- token = Number(token); // convert to number
+ // draw label
+ var point;
+ if (this.label) {
+ if (this.options.smoothCurves.enabled == true && via != null) {
+ var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+ var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+ point = {x:midpointX, y:midpointY};
+ }
+ else {
+ point = this._pointOnLine(0.5);
+ }
+ this._label(ctx, this.label, point.x, point.y);
}
- tokenType = TOKENTYPE.IDENTIFIER;
- return;
}
-
- // check for a string enclosed by double quotes
- if (c == '"') {
- next();
- while (c != '' && (c != '"' || (c == '"' && nextPreview() == '"'))) {
- token += c;
- if (c == '"') { // skip the escape character
- next();
- }
- next();
+ else {
+ var x, y;
+ var radius = this.physics.springLength / 4;
+ var node = this.from;
+ if (!node.width) {
+ node.resize(ctx);
}
- if (c != '"') {
- throw newSyntaxError('End of string " expected');
+ if (node.width > node.height) {
+ x = node.x + node.width / 2;
+ y = node.y - radius;
}
- next();
- tokenType = TOKENTYPE.IDENTIFIER;
- return;
- }
-
- // something unknown is found, wrong characters, a syntax error
- tokenType = TOKENTYPE.UNKNOWN;
- while (c != '') {
- token += c;
- next();
+ else {
+ x = node.x + radius;
+ y = node.y - node.height / 2;
+ }
+ this._circle(ctx, x, y, radius);
+ point = this._pointOnCircle(x, y, radius, 0.5);
+ this._label(ctx, this.label, point.x, point.y);
}
- throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
- }
+ };
/**
- * Parse a graph.
- * @returns {Object} graph
+ * Get the line width of the edge. Depends on width and whether one of the
+ * connected nodes is selected.
+ * @return {Number} width
+ * @private
*/
- function parseGraph() {
- var graph = {};
-
- first();
- getToken();
-
- // optional strict keyword
- if (token == 'strict') {
- graph.strict = true;
- getToken();
- }
-
- // graph or digraph keyword
- if (token == 'graph' || token == 'digraph') {
- graph.type = token;
- getToken();
- }
-
- // optional graph id
- if (tokenType == TOKENTYPE.IDENTIFIER) {
- graph.id = token;
- getToken();
+ Edge.prototype._getLineWidth = function() {
+ if (this.selected == true) {
+ return Math.max(Math.min(this.widthSelected, this.options.widthMax), 0.3*this.networkScaleInv);
}
-
- // open angle bracket
- if (token != '{') {
- throw newSyntaxError('Angle bracket { expected');
+ else {
+ if (this.hover == true) {
+ return Math.max(Math.min(this.options.hoverWidth, this.options.widthMax), 0.3*this.networkScaleInv);
+ }
+ else {
+ return Math.max(this.options.width, 0.3*this.networkScaleInv);
+ }
}
- getToken();
+ };
- // statements
- parseStatements(graph);
+ Edge.prototype._getViaCoordinates = function () {
+ var xVia = null;
+ var yVia = null;
+ var factor = this.options.smoothCurves.roundness;
+ var type = this.options.smoothCurves.type;
- // close angle bracket
- if (token != '}') {
- throw newSyntaxError('Angle bracket } expected');
+ var dx = Math.abs(this.from.x - this.to.x);
+ var dy = Math.abs(this.from.y - this.to.y);
+ if (type == 'discrete' || type == 'diagonalCross') {
+ if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+ if (this.from.y > this.to.y) {
+ if (this.from.x < this.to.x) {
+ xVia = this.from.x + factor * dy;
+ yVia = this.from.y - factor * dy;
+ }
+ else if (this.from.x > this.to.x) {
+ xVia = this.from.x - factor * dy;
+ yVia = this.from.y - factor * dy;
+ }
+ }
+ else if (this.from.y < this.to.y) {
+ if (this.from.x < this.to.x) {
+ xVia = this.from.x + factor * dy;
+ yVia = this.from.y + factor * dy;
+ }
+ else if (this.from.x > this.to.x) {
+ xVia = this.from.x - factor * dy;
+ yVia = this.from.y + factor * dy;
+ }
+ }
+ if (type == "discrete") {
+ xVia = dx < factor * dy ? this.from.x : xVia;
+ }
+ }
+ else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+ if (this.from.y > this.to.y) {
+ if (this.from.x < this.to.x) {
+ xVia = this.from.x + factor * dx;
+ yVia = this.from.y - factor * dx;
+ }
+ else if (this.from.x > this.to.x) {
+ xVia = this.from.x - factor * dx;
+ yVia = this.from.y - factor * dx;
+ }
+ }
+ else if (this.from.y < this.to.y) {
+ if (this.from.x < this.to.x) {
+ xVia = this.from.x + factor * dx;
+ yVia = this.from.y + factor * dx;
+ }
+ else if (this.from.x > this.to.x) {
+ xVia = this.from.x - factor * dx;
+ yVia = this.from.y + factor * dx;
+ }
+ }
+ if (type == "discrete") {
+ yVia = dy < factor * dx ? this.from.y : yVia;
+ }
+ }
}
- getToken();
-
- // end of file
- if (token !== '') {
- throw newSyntaxError('End of file expected');
+ else if (type == "straightCross") {
+ if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) { // up - down
+ xVia = this.from.x;
+ if (this.from.y < this.to.y) {
+ yVia = this.to.y - (1-factor) * dy;
+ }
+ else {
+ yVia = this.to.y + (1-factor) * dy;
+ }
+ }
+ else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) { // left - right
+ if (this.from.x < this.to.x) {
+ xVia = this.to.x - (1-factor) * dx;
+ }
+ else {
+ xVia = this.to.x + (1-factor) * dx;
+ }
+ yVia = this.from.y;
+ }
}
- getToken();
-
- // remove temporary default properties
- delete graph.node;
- delete graph.edge;
- delete graph.graph;
-
- return graph;
- }
-
- /**
- * Parse a list with statements.
- * @param {Object} graph
- */
- function parseStatements (graph) {
- while (token !== '' && token != '}') {
- parseStatement(graph);
- if (token == ';') {
- getToken();
+ else if (type == 'horizontal') {
+ if (this.from.x < this.to.x) {
+ xVia = this.to.x - (1-factor) * dx;
}
+ else {
+ xVia = this.to.x + (1-factor) * dx;
+ }
+ yVia = this.from.y;
}
- }
-
- /**
- * Parse a single statement. Can be a an attribute statement, node
- * statement, a series of node statements and edge statements, or a
- * parameter.
- * @param {Object} graph
- */
- function parseStatement(graph) {
- // parse subgraph
- var subgraph = parseSubgraph(graph);
- if (subgraph) {
- // edge statements
- parseEdge(graph, subgraph);
-
- return;
+ else if (type == 'vertical') {
+ xVia = this.from.x;
+ if (this.from.y < this.to.y) {
+ yVia = this.to.y - (1-factor) * dy;
+ }
+ else {
+ yVia = this.to.y + (1-factor) * dy;
+ }
}
-
- // parse an attribute statement
- var attr = parseAttributeStatement(graph);
- if (attr) {
- return;
+ else { // continuous
+ if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
+ if (this.from.y > this.to.y) {
+ if (this.from.x < this.to.x) {
+ // console.log(1)
+ xVia = this.from.x + factor * dy;
+ yVia = this.from.y - factor * dy;
+ xVia = this.to.x < xVia ? this.to.x : xVia;
+ }
+ else if (this.from.x > this.to.x) {
+ // console.log(2)
+ xVia = this.from.x - factor * dy;
+ yVia = this.from.y - factor * dy;
+ xVia = this.to.x > xVia ? this.to.x :xVia;
+ }
+ }
+ else if (this.from.y < this.to.y) {
+ if (this.from.x < this.to.x) {
+ // console.log(3)
+ xVia = this.from.x + factor * dy;
+ yVia = this.from.y + factor * dy;
+ xVia = this.to.x < xVia ? this.to.x : xVia;
+ }
+ else if (this.from.x > this.to.x) {
+ // console.log(4, this.from.x, this.to.x)
+ xVia = this.from.x - factor * dy;
+ yVia = this.from.y + factor * dy;
+ xVia = this.to.x > xVia ? this.to.x : xVia;
+ }
+ }
+ }
+ else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
+ if (this.from.y > this.to.y) {
+ if (this.from.x < this.to.x) {
+ // console.log(5)
+ xVia = this.from.x + factor * dx;
+ yVia = this.from.y - factor * dx;
+ yVia = this.to.y > yVia ? this.to.y : yVia;
+ }
+ else if (this.from.x > this.to.x) {
+ // console.log(6)
+ xVia = this.from.x - factor * dx;
+ yVia = this.from.y - factor * dx;
+ yVia = this.to.y > yVia ? this.to.y : yVia;
+ }
+ }
+ else if (this.from.y < this.to.y) {
+ if (this.from.x < this.to.x) {
+ // console.log(7)
+ xVia = this.from.x + factor * dx;
+ yVia = this.from.y + factor * dx;
+ yVia = this.to.y < yVia ? this.to.y : yVia;
+ }
+ else if (this.from.x > this.to.x) {
+ // console.log(8)
+ xVia = this.from.x - factor * dx;
+ yVia = this.from.y + factor * dx;
+ yVia = this.to.y < yVia ? this.to.y : yVia;
+ }
+ }
+ }
}
- // parse node
- if (tokenType != TOKENTYPE.IDENTIFIER) {
- throw newSyntaxError('Identifier expected');
- }
- var id = token; // id can be a string or a number
- getToken();
- if (token == '=') {
- // id statement
- getToken();
- if (tokenType != TOKENTYPE.IDENTIFIER) {
- throw newSyntaxError('Identifier expected');
+ return {x:xVia, y:yVia};
+ };
+
+ /**
+ * Draw a line between two nodes
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
+ */
+ Edge.prototype._line = function (ctx) {
+ // draw a straight line
+ ctx.beginPath();
+ ctx.moveTo(this.from.x, this.from.y);
+ if (this.options.smoothCurves.enabled == true) {
+ if (this.options.smoothCurves.dynamic == false) {
+ var via = this._getViaCoordinates();
+ if (via.x == null) {
+ ctx.lineTo(this.to.x, this.to.y);
+ ctx.stroke();
+ return null;
+ }
+ else {
+ // this.via.x = via.x;
+ // this.via.y = via.y;
+ ctx.quadraticCurveTo(via.x,via.y,this.to.x, this.to.y);
+ ctx.stroke();
+ return via;
+ }
+ }
+ else {
+ ctx.quadraticCurveTo(this.via.x,this.via.y,this.to.x, this.to.y);
+ ctx.stroke();
+ return this.via;
}
- graph[id] = token;
- getToken();
- // TODO: implement comma separated list with "a_list: ID=ID [','] [a_list] "
}
else {
- parseNodeStatement(graph, id);
+ ctx.lineTo(this.to.x, this.to.y);
+ ctx.stroke();
+ return null;
}
- }
+ };
/**
- * Parse a subgraph
- * @param {Object} graph parent graph object
- * @return {Object | null} subgraph
+ * Draw a line from a node to itself, a circle
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} radius
+ * @private
*/
- function parseSubgraph (graph) {
- var subgraph = null;
+ Edge.prototype._circle = function (ctx, x, y, radius) {
+ // draw a circle
+ ctx.beginPath();
+ ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+ ctx.stroke();
+ };
- // optional subgraph keyword
- if (token == 'subgraph') {
- subgraph = {};
- subgraph.type = 'subgraph';
- getToken();
+ /**
+ * Draw label with white background and with the middle at (x, y)
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {String} text
+ * @param {Number} x
+ * @param {Number} y
+ * @private
+ */
+ Edge.prototype._label = function (ctx, text, x, y) {
+ if (text) {
+ ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
+ this.options.fontSize + "px " + this.options.fontFace;
+ var yLine;
- // optional graph id
- if (tokenType == TOKENTYPE.IDENTIFIER) {
- subgraph.id = token;
- getToken();
- }
- }
+ if (this.dirtyLabel == true) {
+ var lines = String(text).split('\n');
+ var lineCount = lines.length;
+ var fontSize = (Number(this.options.fontSize) + 4);
+ yLine = y + (1 - lineCount) / 2 * fontSize;
- // open angle bracket
- if (token == '{') {
- getToken();
+ var width = ctx.measureText(lines[0]).width;
+ for (var i = 1; i < lineCount; i++) {
+ var lineWidth = ctx.measureText(lines[i]).width;
+ width = lineWidth > width ? lineWidth : width;
+ }
+ var height = this.options.fontSize * lineCount;
+ var left = x - width / 2;
+ var top = y - height / 2;
- if (!subgraph) {
- subgraph = {};
+ // cache
+ this.labelDimensions = {top:top,left:left,width:width,height:height,yLine:yLine};
}
- subgraph.parent = graph;
- subgraph.node = graph.node;
- subgraph.edge = graph.edge;
- subgraph.graph = graph.graph;
- // statements
- parseStatements(subgraph);
- // close angle bracket
- if (token != '}') {
- throw newSyntaxError('Angle bracket } expected');
+ if (this.options.fontFill !== undefined && this.options.fontFill !== null && this.options.fontFill !== "none") {
+ ctx.fillStyle = this.options.fontFill;
+ ctx.fillRect(this.labelDimensions.left,
+ this.labelDimensions.top,
+ this.labelDimensions.width,
+ this.labelDimensions.height);
}
- getToken();
-
- // remove temporary default properties
- delete subgraph.node;
- delete subgraph.edge;
- delete subgraph.graph;
- delete subgraph.parent;
- // register at the parent graph
- if (!graph.subgraphs) {
- graph.subgraphs = [];
+ // draw text
+ ctx.fillStyle = this.options.fontColor || "black";
+ ctx.textAlign = "center";
+ ctx.textBaseline = "middle";
+ yLine = this.labelDimensions.yLine;
+ for (var i = 0; i < lineCount; i++) {
+ ctx.fillText(lines[i], x, yLine);
+ yLine += fontSize;
}
- graph.subgraphs.push(subgraph);
}
-
- return subgraph;
- }
+ };
/**
- * parse an attribute statement like "node [shape=circle fontSize=16]".
- * Available keywords are 'node', 'edge', 'graph'.
- * The previous list with default attributes will be replaced
- * @param {Object} graph
- * @returns {String | null} keyword Returns the name of the parsed attribute
- * (node, edge, graph), or null if nothing
- * is parsed.
+ * Redraw a edge as a dashed line
+ * Draw this edge in the given canvas
+ * @author David Jordan
+ * @date 2012-08-08
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
*/
- function parseAttributeStatement (graph) {
- // attribute statements
- if (token == 'node') {
- getToken();
+ Edge.prototype._drawDashLine = function(ctx) {
+ // set style
+ ctx.strokeStyle = this._getColor();
+ ctx.lineWidth = this._getLineWidth();
- // node attributes
- graph.node = parseAttributeList();
- return 'node';
- }
- else if (token == 'edge') {
- getToken();
+ var via = null;
+ // only firefox and chrome support this method, else we use the legacy one.
+ if (ctx.mozDash !== undefined || ctx.setLineDash !== undefined) {
+ // configure the dash pattern
+ var pattern = [0];
+ if (this.options.dash.length !== undefined && this.options.dash.gap !== undefined) {
+ pattern = [this.options.dash.length,this.options.dash.gap];
+ }
+ else {
+ pattern = [5,5];
+ }
- // edge attributes
- graph.edge = parseAttributeList();
- return 'edge';
- }
- else if (token == 'graph') {
- getToken();
+ // set dash settings for chrome or firefox
+ if (typeof ctx.setLineDash !== 'undefined') { //Chrome
+ ctx.setLineDash(pattern);
+ ctx.lineDashOffset = 0;
- // graph attributes
- graph.graph = parseAttributeList();
- return 'graph';
+ } else { //Firefox
+ ctx.mozDash = pattern;
+ ctx.mozDashOffset = 0;
+ }
+
+ // draw the line
+ via = this._line(ctx);
+
+ // restore the dash settings.
+ if (typeof ctx.setLineDash !== 'undefined') { //Chrome
+ ctx.setLineDash([0]);
+ ctx.lineDashOffset = 0;
+
+ } else { //Firefox
+ ctx.mozDash = [0];
+ ctx.mozDashOffset = 0;
+ }
+ }
+ else { // unsupporting smooth lines
+ // draw dashed line
+ ctx.beginPath();
+ ctx.lineCap = 'round';
+ if (this.options.dash.altLength !== undefined) //If an alt dash value has been set add to the array this value
+ {
+ ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+ [this.options.dash.length,this.options.dash.gap,this.options.dash.altLength,this.options.dash.gap]);
+ }
+ else if (this.options.dash.length !== undefined && this.options.dash.gap !== undefined) //If a dash and gap value has been set add to the array this value
+ {
+ ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+ [this.options.dash.length,this.options.dash.gap]);
+ }
+ else //If all else fails draw a line
+ {
+ ctx.moveTo(this.from.x, this.from.y);
+ ctx.lineTo(this.to.x, this.to.y);
+ }
+ ctx.stroke();
}
- return null;
- }
+ // draw label
+ if (this.label) {
+ var point;
+ if (this.options.smoothCurves.enabled == true && via != null) {
+ var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+ var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+ point = {x:midpointX, y:midpointY};
+ }
+ else {
+ point = this._pointOnLine(0.5);
+ }
+ this._label(ctx, this.label, point.x, point.y);
+ }
+ };
/**
- * parse a node statement
- * @param {Object} graph
- * @param {String | Number} id
+ * Get a point on a line
+ * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+ * @return {Object} point
+ * @private
*/
- function parseNodeStatement(graph, id) {
- // node statement
- var node = {
- id: id
- };
- var attr = parseAttributeList();
- if (attr) {
- node.attr = attr;
+ Edge.prototype._pointOnLine = function (percentage) {
+ return {
+ x: (1 - percentage) * this.from.x + percentage * this.to.x,
+ y: (1 - percentage) * this.from.y + percentage * this.to.y
}
- addNode(graph, node);
+ };
- // edge statements
- parseEdge(graph, id);
- }
+ /**
+ * Get a point on a circle
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} radius
+ * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+ * @return {Object} point
+ * @private
+ */
+ Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
+ var angle = (percentage - 3/8) * 2 * Math.PI;
+ return {
+ x: x + radius * Math.cos(angle),
+ y: y - radius * Math.sin(angle)
+ }
+ };
/**
- * Parse an edge or a series of edges
- * @param {Object} graph
- * @param {String | Number} from Id of the from node
+ * Redraw a edge as a line with an arrow halfway the line
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
*/
- function parseEdge(graph, from) {
- while (token == '->' || token == '--') {
- var to;
- var type = token;
- getToken();
+ Edge.prototype._drawArrowCenter = function(ctx) {
+ var point;
+ // set style
+ ctx.strokeStyle = this._getColor();
+ ctx.fillStyle = ctx.strokeStyle;
+ ctx.lineWidth = this._getLineWidth();
- var subgraph = parseSubgraph(graph);
- if (subgraph) {
- to = subgraph;
+ if (this.from != this.to) {
+ // draw line
+ var via = this._line(ctx);
+
+ var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+ var length = (10 + 5 * this.options.width) * this.options.arrowScaleFactor;
+ // draw an arrow halfway the line
+ if (this.options.smoothCurves.enabled == true && via != null) {
+ var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+ var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+ point = {x:midpointX, y:midpointY};
}
else {
- if (tokenType != TOKENTYPE.IDENTIFIER) {
- throw newSyntaxError('Identifier or subgraph expected');
- }
- to = token;
- addNode(graph, {
- id: to
- });
- getToken();
+ point = this._pointOnLine(0.5);
}
- // parse edge attributes
- var attr = parseAttributeList();
+ ctx.arrow(point.x, point.y, angle, length);
+ ctx.fill();
+ ctx.stroke();
- // create edge
- var edge = createEdge(graph, from, to, type, attr);
- addEdge(graph, edge);
+ // draw label
+ if (this.label) {
+ this._label(ctx, this.label, point.x, point.y);
+ }
+ }
+ else {
+ // draw circle
+ var x, y;
+ var radius = 0.25 * Math.max(100,this.physics.springLength);
+ var node = this.from;
+ if (!node.width) {
+ node.resize(ctx);
+ }
+ if (node.width > node.height) {
+ x = node.x + node.width * 0.5;
+ y = node.y - radius;
+ }
+ else {
+ x = node.x + radius;
+ y = node.y - node.height * 0.5;
+ }
+ this._circle(ctx, x, y, radius);
- from = to;
+ // draw all arrows
+ var angle = 0.2 * Math.PI;
+ var length = (10 + 5 * this.options.width) * this.options.arrowScaleFactor;
+ point = this._pointOnCircle(x, y, radius, 0.5);
+ ctx.arrow(point.x, point.y, angle, length);
+ ctx.fill();
+ ctx.stroke();
+
+ // draw label
+ if (this.label) {
+ point = this._pointOnCircle(x, y, radius, 0.5);
+ this._label(ctx, this.label, point.x, point.y);
+ }
}
- }
+ };
+
+
/**
- * Parse a set with attributes,
- * for example [label="1.000", shape=solid]
- * @return {Object | null} attr
+ * Redraw a edge as a line with an arrow
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
*/
- function parseAttributeList() {
- var attr = null;
-
- while (token == '[') {
- getToken();
- attr = {};
- while (token !== '' && token != ']') {
- if (tokenType != TOKENTYPE.IDENTIFIER) {
- throw newSyntaxError('Attribute name expected');
- }
- var name = token;
+ Edge.prototype._drawArrow = function(ctx) {
+ // set style
+ ctx.strokeStyle = this._getColor();
+ ctx.fillStyle = ctx.strokeStyle;
+ ctx.lineWidth = this._getLineWidth();
- getToken();
- if (token != '=') {
- throw newSyntaxError('Equal sign = expected');
- }
- getToken();
+ var angle, length;
+ //draw a line
+ if (this.from != this.to) {
+ angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+ var dx = (this.to.x - this.from.x);
+ var dy = (this.to.y - this.from.y);
+ var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
- if (tokenType != TOKENTYPE.IDENTIFIER) {
- throw newSyntaxError('Attribute value expected');
- }
- var value = token;
- setValue(attr, name, value); // name can be a path
+ var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
+ var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
+ var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
+ var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
- getToken();
- if (token ==',') {
- getToken();
- }
+ var via;
+ if (this.options.smoothCurves.dynamic == true && this.options.smoothCurves.enabled == true ) {
+ via = this.via;
+ }
+ else if (this.options.smoothCurves.enabled == true) {
+ via = this._getViaCoordinates();
}
- if (token != ']') {
- throw newSyntaxError('Bracket ] expected');
+ if (this.options.smoothCurves.enabled == true && via.x != null) {
+ angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
+ dx = (this.to.x - via.x);
+ dy = (this.to.y - via.y);
+ edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
}
- getToken();
- }
+ var toBorderDist = this.to.distanceToBorder(ctx, angle);
+ var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
- return attr;
- }
+ var xTo,yTo;
+ if (this.options.smoothCurves.enabled == true && via.x != null) {
+ xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
+ yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
+ }
+ else {
+ xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
+ yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
+ }
- /**
- * Create a syntax error with extra information on current token and index.
- * @param {String} message
- * @returns {SyntaxError} err
- */
- function newSyntaxError(message) {
- return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
- }
+ ctx.beginPath();
+ ctx.moveTo(xFrom,yFrom);
+ if (this.options.smoothCurves.enabled == true && via.x != null) {
+ ctx.quadraticCurveTo(via.x,via.y,xTo, yTo);
+ }
+ else {
+ ctx.lineTo(xTo, yTo);
+ }
+ ctx.stroke();
- /**
- * Chop off text after a maximum length
- * @param {String} text
- * @param {Number} maxLength
- * @returns {String}
- */
- function chop (text, maxLength) {
- return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
- }
+ // draw arrow at the end of the line
+ length = (10 + 5 * this.options.width) * this.options.arrowScaleFactor;
+ ctx.arrow(xTo, yTo, angle, length);
+ ctx.fill();
+ ctx.stroke();
- /**
- * Execute a function fn for each pair of elements in two arrays
- * @param {Array | *} array1
- * @param {Array | *} array2
- * @param {function} fn
- */
- function forEach2(array1, array2, fn) {
- if (Array.isArray(array1)) {
- array1.forEach(function (elem1) {
- if (Array.isArray(array2)) {
- array2.forEach(function (elem2) {
- fn(elem1, elem2);
- });
+ // draw label
+ if (this.label) {
+ var point;
+ if (this.options.smoothCurves.enabled == true && via != null) {
+ var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
+ var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
+ point = {x:midpointX, y:midpointY};
}
else {
- fn(elem1, array2);
+ point = this._pointOnLine(0.5);
}
- });
+ this._label(ctx, this.label, point.x, point.y);
+ }
}
else {
- if (Array.isArray(array2)) {
- array2.forEach(function (elem2) {
- fn(array1, elem2);
- });
+ // draw circle
+ var node = this.from;
+ var x, y, arrow;
+ var radius = 0.25 * Math.max(100,this.physics.springLength);
+ if (!node.width) {
+ node.resize(ctx);
+ }
+ if (node.width > node.height) {
+ x = node.x + node.width * 0.5;
+ y = node.y - radius;
+ arrow = {
+ x: x,
+ y: node.y,
+ angle: 0.9 * Math.PI
+ };
}
else {
- fn(array1, array2);
+ x = node.x + radius;
+ y = node.y - node.height * 0.5;
+ arrow = {
+ x: node.x,
+ y: y,
+ angle: 0.6 * Math.PI
+ };
}
- }
- }
+ ctx.beginPath();
+ // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
+ ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+ ctx.stroke();
- /**
- * Convert a string containing a graph in DOT language into a map containing
- * with nodes and edges in the format of graph.
- * @param {String} data Text containing a graph in DOT-notation
- * @return {Object} graphData
- */
- function DOTToGraph (data) {
- // parse the DOT file
- var dotData = parseDOT(data);
- var graphData = {
- nodes: [],
- edges: [],
- options: {}
- };
+ // draw all arrows
+ var length = (10 + 5 * this.options.width) * this.options.arrowScaleFactor;
+ ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
+ ctx.fill();
+ ctx.stroke();
- // copy the nodes
- if (dotData.nodes) {
- dotData.nodes.forEach(function (dotNode) {
- var graphNode = {
- id: dotNode.id,
- label: String(dotNode.label || dotNode.id)
- };
- merge(graphNode, dotNode.attr);
- if (graphNode.image) {
- graphNode.shape = 'image';
- }
- graphData.nodes.push(graphNode);
- });
+ // draw label
+ if (this.label) {
+ point = this._pointOnCircle(x, y, radius, 0.5);
+ this._label(ctx, this.label, point.x, point.y);
+ }
}
+ };
- // copy the edges
- if (dotData.edges) {
- /**
- * Convert an edge in DOT format to an edge with VisGraph format
- * @param {Object} dotEdge
- * @returns {Object} graphEdge
- */
- var convertEdge = function (dotEdge) {
- var graphEdge = {
- from: dotEdge.from,
- to: dotEdge.to
- };
- merge(graphEdge, dotEdge.attr);
- graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
- return graphEdge;
- }
- dotData.edges.forEach(function (dotEdge) {
- var from, to;
- if (dotEdge.from instanceof Object) {
- from = dotEdge.from.nodes;
- }
- else {
- from = {
- id: dotEdge.from
- }
- }
- if (dotEdge.to instanceof Object) {
- to = dotEdge.to.nodes;
+ /**
+ * Calculate the distance between a point (x3,y3) and a line segment from
+ * (x1,y1) to (x2,y2).
+ * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
+ * @param {number} x1
+ * @param {number} y1
+ * @param {number} x2
+ * @param {number} y2
+ * @param {number} x3
+ * @param {number} y3
+ * @private
+ */
+ Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
+ var returnValue = 0;
+ if (this.from != this.to) {
+ if (this.options.smoothCurves.enabled == true) {
+ var xVia, yVia;
+ if (this.options.smoothCurves.enabled == true && this.options.smoothCurves.dynamic == true) {
+ xVia = this.via.x;
+ yVia = this.via.y;
}
else {
- to = {
- id: dotEdge.to
- }
- }
-
- if (dotEdge.from instanceof Object && dotEdge.from.edges) {
- dotEdge.from.edges.forEach(function (subEdge) {
- var graphEdge = convertEdge(subEdge);
- graphData.edges.push(graphEdge);
- });
+ var via = this._getViaCoordinates();
+ xVia = via.x;
+ yVia = via.y;
}
-
- forEach2(from, to, function (from, to) {
- var subEdge = createEdge(graphData, from.id, to.id, dotEdge.type, dotEdge.attr);
- var graphEdge = convertEdge(subEdge);
- graphData.edges.push(graphEdge);
- });
-
- if (dotEdge.to instanceof Object && dotEdge.to.edges) {
- dotEdge.to.edges.forEach(function (subEdge) {
- var graphEdge = convertEdge(subEdge);
- graphData.edges.push(graphEdge);
- });
+ var minDistance = 1e9;
+ var distance;
+ var i,t,x,y, lastX, lastY;
+ for (i = 0; i < 10; i++) {
+ t = 0.1*i;
+ x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*xVia + Math.pow(t,2)*x2;
+ y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*yVia + Math.pow(t,2)*y2;
+ if (i > 0) {
+ distance = this._getDistanceToLine(lastX,lastY,x,y, x3,y3);
+ minDistance = distance < minDistance ? distance : minDistance;
+ }
+ lastX = x; lastY = y;
}
- });
- }
-
- // copy the options
- if (dotData.attr) {
- graphData.options = dotData.attr;
- }
-
- return graphData;
- }
-
- // exports
- exports.parseDOT = parseDOT;
- exports.DOTToGraph = DOTToGraph;
-
-
-/***/ },
-/* 53 */
-/***/ function(module, exports, __webpack_require__) {
-
-
- function parseGephi(gephiJSON, options) {
- var edges = [];
- var nodes = [];
- this.options = {
- edges: {
- inheritColor: true
- },
- nodes: {
- allowedToMove: false,
- parseColor: false
+ returnValue = minDistance;
+ }
+ else {
+ returnValue = this._getDistanceToLine(x1,y1,x2,y2,x3,y3);
}
- };
-
- if (options !== undefined) {
- this.options.nodes['allowedToMove'] = options.allowedToMove | false;
- this.options.nodes['parseColor'] = options.parseColor | false;
- this.options.edges['inheritColor'] = options.inheritColor | true;
- }
-
- var gEdges = gephiJSON.edges;
- var gNodes = gephiJSON.nodes;
- for (var i = 0; i < gEdges.length; i++) {
- var edge = {};
- var gEdge = gEdges[i];
- edge['id'] = gEdge.id;
- edge['from'] = gEdge.source;
- edge['to'] = gEdge.target;
- edge['attributes'] = gEdge.attributes;
- // edge['value'] = gEdge.attributes !== undefined ? gEdge.attributes.Weight : undefined;
- // edge['width'] = edge['value'] !== undefined ? undefined : edgegEdge.size;
- edge['color'] = gEdge.color;
- edge['inheritColor'] = edge['color'] !== undefined ? false : this.options.inheritColor;
- edges.push(edge);
}
-
- for (var i = 0; i < gNodes.length; i++) {
- var node = {};
- var gNode = gNodes[i];
- node['id'] = gNode.id;
- node['attributes'] = gNode.attributes;
- node['x'] = gNode.x;
- node['y'] = gNode.y;
- node['label'] = gNode.label;
- if (this.options.nodes.parseColor == true) {
- node['color'] = gNode.color;
+ else {
+ var x, y, dx, dy;
+ var radius = 0.25 * this.physics.springLength;
+ var node = this.from;
+ if (node.width > node.height) {
+ x = node.x + 0.5 * node.width;
+ y = node.y - radius;
}
else {
- node['color'] = gNode.color !== undefined ? {background:gNode.color, border:gNode.color} : undefined;
+ x = node.x + radius;
+ y = node.y - 0.5 * node.height;
}
- node['radius'] = gNode.size;
- node['allowedToMoveX'] = this.options.nodes.allowedToMove;
- node['allowedToMoveY'] = this.options.nodes.allowedToMove;
- nodes.push(node);
+ dx = x - x3;
+ dy = y - y3;
+ returnValue = Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
+ }
+
+ if (this.labelDimensions.left < x3 &&
+ this.labelDimensions.left + this.labelDimensions.width > x3 &&
+ this.labelDimensions.top < y3 &&
+ this.labelDimensions.top + this.labelDimensions.height > y3) {
+ return 0;
}
+ else {
+ return returnValue;
+ }
+ };
- return {nodes:nodes, edges:edges};
- }
+ Edge.prototype._getDistanceToLine = function(x1,y1,x2,y2,x3,y3) {
+ var px = x2-x1,
+ py = y2-y1,
+ something = px*px + py*py,
+ u = ((x3 - x1) * px + (y3 - y1) * py) / something;
- exports.parseGephi = parseGephi;
+ if (u > 1) {
+ u = 1;
+ }
+ else if (u < 0) {
+ u = 0;
+ }
-/***/ },
-/* 54 */
-/***/ function(module, exports, __webpack_require__) {
+ var x = x1 + u * px,
+ y = y1 + u * py,
+ dx = x - x3,
+ dy = y - y3;
- var util = __webpack_require__(1);
+ //# Note: If the actual distance does not matter,
+ //# if you only want to compare what this function
+ //# returns to other results of this function, you
+ //# can just return the squared distance instead
+ //# (i.e. remove the sqrt) to gain a little performance
+
+ return Math.sqrt(dx*dx + dy*dy);
+ };
/**
- * @class Groups
- * This class can store groups and properties specific for groups.
+ * This allows the zoom level of the network to influence the rendering
+ *
+ * @param scale
*/
- function Groups() {
- this.clear();
- this.defaultIndex = 0;
- }
+ Edge.prototype.setScale = function(scale) {
+ this.networkScaleInv = 1.0/scale;
+ };
- /**
- * default constants for group colors
- */
- Groups.DEFAULT = [
- {border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}, hover: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
- {border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}, hover: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
- {border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}, hover: {border: "#FA0A10", background: "#FFAFB1"}}, // red
- {border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}, hover: {border: "#41A906", background: "#A1EC76"}}, // green
- {border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}, hover: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
- {border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}, hover: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
- {border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}, hover: {border: "#C37F00", background: "#FFCA66"}}, // orange
- {border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}, hover: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
- {border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}, hover: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
- {border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}, hover: {border: "#4AD63A", background: "#E6FFE3"}} // mint
- ];
+ Edge.prototype.select = function() {
+ this.selected = true;
+ };
+ Edge.prototype.unselect = function() {
+ this.selected = false;
+ };
- /**
- * Clear all groups
- */
- Groups.prototype.clear = function () {
- this.groups = {};
- this.groups.length = function()
- {
- var i = 0;
- for ( var p in this ) {
- if (this.hasOwnProperty(p)) {
- i++;
- }
- }
- return i;
+ Edge.prototype.positionBezierNode = function() {
+ if (this.via !== null && this.from !== null && this.to !== null) {
+ this.via.x = 0.5 * (this.from.x + this.to.x);
+ this.via.y = 0.5 * (this.from.y + this.to.y);
+ }
+ else {
+ this.via.x = 0;
+ this.via.y = 0;
}
};
-
/**
- * get group properties of a groupname. If groupname is not found, a new group
- * is added.
- * @param {*} groupname Can be a number, string, Date, etc.
- * @return {Object} group The created group, containing all group properties
+ * This function draws the control nodes for the manipulator.
+ * In order to enable this, only set the this.controlNodesEnabled to true.
+ * @param ctx
*/
- Groups.prototype.get = function (groupname) {
- var group = this.groups[groupname];
- if (group == undefined) {
- // create new group
- var index = this.defaultIndex % Groups.DEFAULT.length;
- this.defaultIndex++;
- group = {};
- group.color = Groups.DEFAULT[index];
- this.groups[groupname] = group;
- }
+ Edge.prototype._drawControlNodes = function(ctx) {
+ if (this.controlNodesEnabled == true) {
+ if (this.controlNodes.from === null && this.controlNodes.to === null) {
+ var nodeIdFrom = "edgeIdFrom:".concat(this.id);
+ var nodeIdTo = "edgeIdTo:".concat(this.id);
+ var constants = {
+ nodes:{group:'', radius:8},
+ physics:{damping:0},
+ clustering: {maxNodeSizeIncrements: 0 ,nodeScaling: {width:0, height: 0, radius:0}}
+ };
+ this.controlNodes.from = new Node(
+ {id:nodeIdFrom,
+ shape:'dot',
+ color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
+ },{},{},constants);
+ this.controlNodes.to = new Node(
+ {id:nodeIdTo,
+ shape:'dot',
+ color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
+ },{},{},constants);
+ }
- return group;
+ if (this.controlNodes.from.selected == false && this.controlNodes.to.selected == false) {
+ this.controlNodes.positions = this.getControlNodePositions(ctx);
+ this.controlNodes.from.x = this.controlNodes.positions.from.x;
+ this.controlNodes.from.y = this.controlNodes.positions.from.y;
+ this.controlNodes.to.x = this.controlNodes.positions.to.x;
+ this.controlNodes.to.y = this.controlNodes.positions.to.y;
+ }
+
+ this.controlNodes.from.draw(ctx);
+ this.controlNodes.to.draw(ctx);
+ }
+ else {
+ this.controlNodes = {from:null, to:null, positions:{}};
+ }
};
/**
- * Add a custom group style
- * @param {String} groupname
- * @param {Object} style An object containing borderColor,
- * backgroundColor, etc.
- * @return {Object} group The created group object
+ * Enable control nodes.
+ * @private
*/
- Groups.prototype.add = function (groupname, style) {
- this.groups[groupname] = style;
- return style;
+ Edge.prototype._enableControlNodes = function() {
+ this.fromBackup = this.from;
+ this.toBackup = this.to;
+ this.controlNodesEnabled = true;
};
- module.exports = Groups;
+ /**
+ * disable control nodes and remove from dynamicEdges from old node
+ * @private
+ */
+ Edge.prototype._disableControlNodes = function() {
+ this.fromId = this.from.id;
+ this.toId = this.to.id;
+ if (this.fromId != this.fromBackup.id) { // from was changed, remove edge from old 'from' node dynamic edges
+ this.fromBackup.detachEdge(this);
+ }
+ else if (this.toId != this.toBackup.id) { // to was changed, remove edge from old 'to' node dynamic edges
+ this.toBackup.detachEdge(this);
+ }
+ this.fromBackup = null;
+ this.toBackup = null;
+ this.controlNodesEnabled = false;
+ };
-/***/ },
-/* 55 */
-/***/ function(module, exports, __webpack_require__) {
/**
- * @class Images
- * This class loads images and keeps them stored.
+ * This checks if one of the control nodes is selected and if so, returns the control node object. Else it returns null.
+ * @param x
+ * @param y
+ * @returns {null}
+ * @private
*/
- function Images() {
- this.images = {};
+ Edge.prototype._getSelectedControlNode = function(x,y) {
+ var positions = this.controlNodes.positions;
+ var fromDistance = Math.sqrt(Math.pow(x - positions.from.x,2) + Math.pow(y - positions.from.y,2));
+ var toDistance = Math.sqrt(Math.pow(x - positions.to.x ,2) + Math.pow(y - positions.to.y ,2));
+
+ if (fromDistance < 15) {
+ this.connectedNode = this.from;
+ this.from = this.controlNodes.from;
+ return this.controlNodes.from;
+ }
+ else if (toDistance < 15) {
+ this.connectedNode = this.to;
+ this.to = this.controlNodes.to;
+ return this.controlNodes.to;
+ }
+ else {
+ return null;
+ }
+ };
- this.callback = undefined;
- }
/**
- * Set an onload callback function. This will be called each time an image
- * is loaded
- * @param {function} callback
+ * this resets the control nodes to their original position.
+ * @private
*/
- Images.prototype.setOnloadCallback = function(callback) {
- this.callback = callback;
+ Edge.prototype._restoreControlNodes = function() {
+ if (this.controlNodes.from.selected == true) {
+ this.from = this.connectedNode;
+ this.connectedNode = null;
+ this.controlNodes.from.unselect();
+ }
+ else if (this.controlNodes.to.selected == true) {
+ this.to = this.connectedNode;
+ this.connectedNode = null;
+ this.controlNodes.to.unselect();
+ }
};
/**
+ * this calculates the position of the control nodes on the edges of the parent nodes.
*
- * @param {string} url Url of the image
- * @param {string} url Url of an image to use if the url image is not found
- * @return {Image} img The image object
+ * @param ctx
+ * @returns {{from: {x: number, y: number}, to: {x: *, y: *}}}
*/
- Images.prototype.load = function(url, brokenUrl) {
- var img = this.images[url];
- if (img == undefined) {
- // create the image
- var images = this;
- img = new Image();
- this.images[url] = img;
- img.onload = function() {
- if (images.callback) {
- images.callback(this);
- }
- };
-
- img.onerror = function () {
- this.src = brokenUrl;
- if (images.callback) {
- images.callback(this);
- }
- };
-
- img.src = url;
+ Edge.prototype.getControlNodePositions = function(ctx) {
+ var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+ var dx = (this.to.x - this.from.x);
+ var dy = (this.to.y - this.from.y);
+ var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+ var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
+ var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
+ var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
+ var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
+
+ var via;
+ if (this.options.smoothCurves.dynamic == true && this.options.smoothCurves.enabled == true) {
+ via = this.via;
+ }
+ else if (this.options.smoothCurves.enabled == true) {
+ via = this._getViaCoordinates();
+ }
+
+ if (this.options.smoothCurves.enabled == true && via.x != null) {
+ angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
+ dx = (this.to.x - via.x);
+ dy = (this.to.y - via.y);
+ edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
}
+ var toBorderDist = this.to.distanceToBorder(ctx, angle);
+ var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
- return img;
- };
+ var xTo,yTo;
+ if (this.options.smoothCurves.enabled == true && via.x != null) {
+ xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
+ yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
+ }
+ else {
+ xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
+ yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
+ }
- module.exports = Images;
+ return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}};
+ };
+ module.exports = Edge;
/***/ },
-/* 56 */
+/* 53 */
/***/ function(module, exports, __webpack_require__) {
var util = __webpack_require__(1);
@@ -26392,8 +26569,6 @@ return /******/ (function(modules) { // webpackBootstrap
this.options.radiusMax = constants.nodes.widthMax;
}
-
-
// choose draw method depending on the shape
switch (this.options.shape) {
case 'database': this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
@@ -26720,7 +26895,6 @@ return /******/ (function(modules) { // webpackBootstrap
Node.prototype._drawImage = function (ctx) {
this._resizeImage(ctx);
-
this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2;
@@ -27144,1464 +27318,1294 @@ return /******/ (function(modules) { // webpackBootstrap
if (this.label !== undefined) {
ctx.font = (this.selected ? "bold " : "") + this.options.fontSize + "px " + this.options.fontFace;
- var lines = this.label.split('\n'),
- height = (Number(this.options.fontSize) + 4) * lines.length,
- width = 0;
-
- for (var i = 0, iMax = lines.length; i < iMax; i++) {
- width = Math.max(width, ctx.measureText(lines[i]).width);
- }
-
- return {"width": width, "height": height};
- }
- else {
- return {"width": 0, "height": 0};
- }
- };
-
- /**
- * this is used to determine if a node is visible at all. this is used to determine when it needs to be drawn.
- * there is a safety margin of 0.3 * width;
- *
- * @returns {boolean}
- */
- Node.prototype.inArea = function() {
- if (this.width !== undefined) {
- return (this.x + this.width *this.networkScaleInv >= this.canvasTopLeft.x &&
- this.x - this.width *this.networkScaleInv < this.canvasBottomRight.x &&
- this.y + this.height*this.networkScaleInv >= this.canvasTopLeft.y &&
- this.y - this.height*this.networkScaleInv < this.canvasBottomRight.y);
- }
- else {
- return true;
- }
- };
-
- /**
- * checks if the core of the node is in the display area, this is used for opening clusters around zoom
- * @returns {boolean}
- */
- Node.prototype.inView = function() {
- return (this.x >= this.canvasTopLeft.x &&
- this.x < this.canvasBottomRight.x &&
- this.y >= this.canvasTopLeft.y &&
- this.y < this.canvasBottomRight.y);
- };
-
- /**
- * This allows the zoom level of the network to influence the rendering
- * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
- *
- * @param scale
- * @param canvasTopLeft
- * @param canvasBottomRight
- */
- Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
- this.networkScaleInv = 1.0/scale;
- this.networkScale = scale;
- this.canvasTopLeft = canvasTopLeft;
- this.canvasBottomRight = canvasBottomRight;
- };
-
-
- /**
- * This allows the zoom level of the network to influence the rendering
- *
- * @param scale
- */
- Node.prototype.setScale = function(scale) {
- this.networkScaleInv = 1.0/scale;
- this.networkScale = scale;
- };
-
-
-
- /**
- * set the velocity at 0. Is called when this node is contained in another during clustering
- */
- Node.prototype.clearVelocity = function() {
- this.vx = 0;
- this.vy = 0;
- };
-
-
- /**
- * Basic preservation of (kinectic) energy
- *
- * @param massBeforeClustering
- */
- Node.prototype.updateVelocity = function(massBeforeClustering) {
- var energyBefore = this.vx * this.vx * massBeforeClustering;
- //this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.options.mass) : Math.sqrt(energyBefore/this.options.mass);
- this.vx = Math.sqrt(energyBefore/this.options.mass);
- energyBefore = this.vy * this.vy * massBeforeClustering;
- //this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.options.mass) : Math.sqrt(energyBefore/this.options.mass);
- this.vy = Math.sqrt(energyBefore/this.options.mass);
- };
-
- module.exports = Node;
-
-
-/***/ },
-/* 57 */
-/***/ function(module, exports, __webpack_require__) {
-
- var util = __webpack_require__(1);
- var Node = __webpack_require__(56);
-
- /**
- * @class Edge
- *
- * A edge connects two nodes
- * @param {Object} properties Object with properties. Must contain
- * At least properties from and to.
- * Available properties: from (number),
- * to (number), label (string, color (string),
- * width (number), style (string),
- * length (number), title (string)
- * @param {Network} network A Network object, used to find and edge to
- * nodes.
- * @param {Object} constants An object with default values for
- * example for the color
- */
- function Edge (properties, network, networkConstants) {
- if (!network) {
- throw "No network provided";
- }
- var fields = ['edges','physics'];
- var constants = util.selectiveBridgeObject(fields,networkConstants);
- this.options = constants.edges;
- this.physics = constants.physics;
- this.options['smoothCurves'] = networkConstants['smoothCurves'];
-
-
- this.network = network;
-
- // initialize variables
- this.id = undefined;
- this.fromId = undefined;
- this.toId = undefined;
- this.title = undefined;
- this.widthSelected = this.options.width * this.options.widthSelectionMultiplier;
- this.value = undefined;
- this.selected = false;
- this.hover = false;
- this.labelDimensions = {top:0,left:0,width:0,height:0,yLine:0}; // could be cached
- this.dirtyLabel = true;
-
- this.from = null; // a node
- this.to = null; // a node
- this.via = null; // a temp node
-
- this.fromBackup = null; // used to clean up after reconnect
- this.toBackup = null;; // used to clean up after reconnect
-
- // we use this to be able to reconnect the edge to a cluster if its node is put into a cluster
- // by storing the original information we can revert to the original connection when the cluser is opened.
- this.originalFromId = [];
- this.originalToId = [];
-
- this.connected = false;
-
- this.widthFixed = false;
- this.lengthFixed = false;
-
- this.setProperties(properties);
-
- this.controlNodesEnabled = false;
- this.controlNodes = {from:null, to:null, positions:{}};
- this.connectedNode = null;
- }
-
- /**
- * Set or overwrite properties for the edge
- * @param {Object} properties an object with properties
- * @param {Object} constants and object with default, global properties
- */
- Edge.prototype.setProperties = function(properties) {
- if (!properties) {
- return;
- }
-
- var fields = ['style','fontSize','fontFace','fontColor','fontFill','width',
- 'widthSelectionMultiplier','hoverWidth','arrowScaleFactor','dash','inheritColor'
- ];
- util.selectiveDeepExtend(fields, this.options, properties);
-
- if (properties.from !== undefined) {this.fromId = properties.from;}
- if (properties.to !== undefined) {this.toId = properties.to;}
-
- if (properties.id !== undefined) {this.id = properties.id;}
- if (properties.label !== undefined) {this.label = properties.label; this.dirtyLabel = true;}
-
- if (properties.title !== undefined) {this.title = properties.title;}
- if (properties.value !== undefined) {this.value = properties.value;}
- if (properties.length !== undefined) {this.physics.springLength = properties.length;}
-
- if (properties.color !== undefined) {
- this.options.inheritColor = false;
- if (util.isString(properties.color)) {
- this.options.color.color = properties.color;
- this.options.color.highlight = properties.color;
- }
- else {
- if (properties.color.color !== undefined) {this.options.color.color = properties.color.color;}
- if (properties.color.highlight !== undefined) {this.options.color.highlight = properties.color.highlight;}
- if (properties.color.hover !== undefined) {this.options.color.hover = properties.color.hover;}
- }
- }
-
- // A node is connected when it has a from and to node.
- this.connect();
-
- this.widthFixed = this.widthFixed || (properties.width !== undefined);
- this.lengthFixed = this.lengthFixed || (properties.length !== undefined);
-
- this.widthSelected = this.options.width* this.options.widthSelectionMultiplier;
-
- // set draw method based on style
- switch (this.options.style) {
- case 'line': this.draw = this._drawLine; break;
- case 'arrow': this.draw = this._drawArrow; break;
- case 'arrow-center': this.draw = this._drawArrowCenter; break;
- case 'dash-line': this.draw = this._drawDashLine; break;
- default: this.draw = this._drawLine; break;
- }
- };
-
- /**
- * Connect an edge to its nodes
- */
- Edge.prototype.connect = function () {
- this.disconnect();
+ var lines = this.label.split('\n'),
+ height = (Number(this.options.fontSize) + 4) * lines.length,
+ width = 0;
- this.from = this.network.nodes[this.fromId] || null;
- this.to = this.network.nodes[this.toId] || null;
- this.connected = (this.from && this.to);
+ for (var i = 0, iMax = lines.length; i < iMax; i++) {
+ width = Math.max(width, ctx.measureText(lines[i]).width);
+ }
- if (this.connected) {
- this.from.attachEdge(this);
- this.to.attachEdge(this);
+ return {"width": width, "height": height};
}
else {
- if (this.from) {
- this.from.detachEdge(this);
- }
- if (this.to) {
- this.to.detachEdge(this);
- }
+ return {"width": 0, "height": 0};
}
};
/**
- * Disconnect an edge from its nodes
+ * this is used to determine if a node is visible at all. this is used to determine when it needs to be drawn.
+ * there is a safety margin of 0.3 * width;
+ *
+ * @returns {boolean}
*/
- Edge.prototype.disconnect = function () {
- if (this.from) {
- this.from.detachEdge(this);
- this.from = null;
+ Node.prototype.inArea = function() {
+ if (this.width !== undefined) {
+ return (this.x + this.width *this.networkScaleInv >= this.canvasTopLeft.x &&
+ this.x - this.width *this.networkScaleInv < this.canvasBottomRight.x &&
+ this.y + this.height*this.networkScaleInv >= this.canvasTopLeft.y &&
+ this.y - this.height*this.networkScaleInv < this.canvasBottomRight.y);
}
- if (this.to) {
- this.to.detachEdge(this);
- this.to = null;
+ else {
+ return true;
}
-
- this.connected = false;
};
/**
- * get the title of this edge.
- * @return {string} title The title of the edge, or undefined when no title
- * has been set.
+ * checks if the core of the node is in the display area, this is used for opening clusters around zoom
+ * @returns {boolean}
*/
- Edge.prototype.getTitle = function() {
- return typeof this.title === "function" ? this.title() : this.title;
+ Node.prototype.inView = function() {
+ return (this.x >= this.canvasTopLeft.x &&
+ this.x < this.canvasBottomRight.x &&
+ this.y >= this.canvasTopLeft.y &&
+ this.y < this.canvasBottomRight.y);
};
-
/**
- * Retrieve the value of the edge. Can be undefined
- * @return {Number} value
+ * This allows the zoom level of the network to influence the rendering
+ * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
+ *
+ * @param scale
+ * @param canvasTopLeft
+ * @param canvasBottomRight
*/
- Edge.prototype.getValue = function() {
- return this.value;
+ Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
+ this.networkScaleInv = 1.0/scale;
+ this.networkScale = scale;
+ this.canvasTopLeft = canvasTopLeft;
+ this.canvasBottomRight = canvasBottomRight;
};
+
/**
- * Adjust the value range of the edge. The edge will adjust it's width
- * based on its value.
- * @param {Number} min
- * @param {Number} max
+ * This allows the zoom level of the network to influence the rendering
+ *
+ * @param scale
*/
- Edge.prototype.setValueRange = function(min, max) {
- if (!this.widthFixed && this.value !== undefined) {
- var scale = (this.options.widthMax - this.options.widthMin) / (max - min);
- this.options.width= (this.value - min) * scale + this.options.widthMin;
- this.widthSelected = this.options.width* this.options.widthSelectionMultiplier;
- }
+ Node.prototype.setScale = function(scale) {
+ this.networkScaleInv = 1.0/scale;
+ this.networkScale = scale;
};
+
+
/**
- * Redraw a edge
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D} ctx
+ * set the velocity at 0. Is called when this node is contained in another during clustering
*/
- Edge.prototype.draw = function(ctx) {
- throw "Method draw not initialized in edge";
+ Node.prototype.clearVelocity = function() {
+ this.vx = 0;
+ this.vy = 0;
};
+
/**
- * Check if this object is overlapping with the provided object
- * @param {Object} obj an object with parameters left, top
- * @return {boolean} True if location is located on the edge
+ * Basic preservation of (kinectic) energy
+ *
+ * @param massBeforeClustering
*/
- Edge.prototype.isOverlappingWith = function(obj) {
- if (this.connected) {
- var distMax = 10;
- var xFrom = this.from.x;
- var yFrom = this.from.y;
- var xTo = this.to.x;
- var yTo = this.to.y;
- var xObj = obj.left;
- var yObj = obj.top;
+ Node.prototype.updateVelocity = function(massBeforeClustering) {
+ var energyBefore = this.vx * this.vx * massBeforeClustering;
+ //this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.options.mass) : Math.sqrt(energyBefore/this.options.mass);
+ this.vx = Math.sqrt(energyBefore/this.options.mass);
+ energyBefore = this.vy * this.vy * massBeforeClustering;
+ //this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.options.mass) : Math.sqrt(energyBefore/this.options.mass);
+ this.vy = Math.sqrt(energyBefore/this.options.mass);
+ };
- var dist = this._getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
+ module.exports = Node;
- return (dist < distMax);
- }
- else {
- return false
- }
- };
- Edge.prototype._getColor = function() {
- var colorObj = this.options.color;
- if (this.options.inheritColor == "to") {
- colorObj = {
- highlight: this.to.options.color.highlight.border,
- hover: this.to.options.color.hover.border,
- color: this.to.options.color.border
- };
- }
- else if (this.options.inheritColor == "from" || this.options.inheritColor == true) {
- colorObj = {
- highlight: this.from.options.color.highlight.border,
- hover: this.from.options.color.hover.border,
- color: this.from.options.color.border
- };
- }
+/***/ },
+/* 54 */
+/***/ function(module, exports, __webpack_require__) {
- if (this.selected == true) {return colorObj.highlight;}
- else if (this.hover == true) {return colorObj.hover;}
- else {return colorObj.color;}
- };
+ var util = __webpack_require__(1);
+
+ /**
+ * @class Groups
+ * This class can store groups and properties specific for groups.
+ */
+ function Groups() {
+ this.clear();
+ this.defaultIndex = 0;
+ }
/**
- * Redraw a edge as a line
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D} ctx
- * @private
+ * default constants for group colors
*/
- Edge.prototype._drawLine = function(ctx) {
- // set style
- ctx.strokeStyle = this._getColor();
- ctx.lineWidth = this._getLineWidth();
+ Groups.DEFAULT = [
+ {border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}, hover: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
+ {border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}, hover: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
+ {border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}, hover: {border: "#FA0A10", background: "#FFAFB1"}}, // red
+ {border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}, hover: {border: "#41A906", background: "#A1EC76"}}, // green
+ {border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}, hover: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
+ {border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}, hover: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
+ {border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}, hover: {border: "#C37F00", background: "#FFCA66"}}, // orange
+ {border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}, hover: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
+ {border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}, hover: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
+ {border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}, hover: {border: "#4AD63A", background: "#E6FFE3"}} // mint
+ ];
- if (this.from != this.to) {
- // draw line
- var via = this._line(ctx);
- // draw label
- var point;
- if (this.label) {
- if (this.options.smoothCurves.enabled == true && via != null) {
- var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
- var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
- point = {x:midpointX, y:midpointY};
- }
- else {
- point = this._pointOnLine(0.5);
+ /**
+ * Clear all groups
+ */
+ Groups.prototype.clear = function () {
+ this.groups = {};
+ this.groups.length = function()
+ {
+ var i = 0;
+ for ( var p in this ) {
+ if (this.hasOwnProperty(p)) {
+ i++;
}
- this._label(ctx, this.label, point.x, point.y);
}
+ return i;
}
- else {
- var x, y;
- var radius = this.physics.springLength / 4;
- var node = this.from;
- if (!node.width) {
- node.resize(ctx);
- }
- if (node.width > node.height) {
- x = node.x + node.width / 2;
- y = node.y - radius;
- }
- else {
- x = node.x + radius;
- y = node.y - node.height / 2;
- }
- this._circle(ctx, x, y, radius);
- point = this._pointOnCircle(x, y, radius, 0.5);
- this._label(ctx, this.label, point.x, point.y);
+ };
+
+
+ /**
+ * get group properties of a groupname. If groupname is not found, a new group
+ * is added.
+ * @param {*} groupname Can be a number, string, Date, etc.
+ * @return {Object} group The created group, containing all group properties
+ */
+ Groups.prototype.get = function (groupname) {
+ var group = this.groups[groupname];
+ if (group == undefined) {
+ // create new group
+ var index = this.defaultIndex % Groups.DEFAULT.length;
+ this.defaultIndex++;
+ group = {};
+ group.color = Groups.DEFAULT[index];
+ this.groups[groupname] = group;
}
+
+ return group;
+ };
+
+ /**
+ * Add a custom group style
+ * @param {String} groupname
+ * @param {Object} style An object containing borderColor,
+ * backgroundColor, etc.
+ * @return {Object} group The created group object
+ */
+ Groups.prototype.add = function (groupname, style) {
+ this.groups[groupname] = style;
+ return style;
};
+ module.exports = Groups;
+
+
+/***/ },
+/* 55 */
+/***/ function(module, exports, __webpack_require__) {
+
/**
- * Get the line width of the edge. Depends on width and whether one of the
- * connected nodes is selected.
- * @return {Number} width
- * @private
+ * @class Images
+ * This class loads images and keeps them stored.
*/
- Edge.prototype._getLineWidth = function() {
- if (this.selected == true) {
- return Math.max(Math.min(this.widthSelected, this.options.widthMax), 0.3*this.networkScaleInv);
- }
- else {
- if (this.hover == true) {
- return Math.max(Math.min(this.options.hoverWidth, this.options.widthMax), 0.3*this.networkScaleInv);
- }
- else {
- return Math.max(this.options.width, 0.3*this.networkScaleInv);
- }
- }
- };
+ function Images() {
+ this.images = {};
+ this.callback = undefined;
+ }
- Edge.prototype._getViaCoordinates = function () {
- var xVia = null;
- var yVia = null;
- var factor = this.options.smoothCurves.roundness;
- var type = this.options.smoothCurves.type;
+ /**
+ * Set an onload callback function. This will be called each time an image
+ * is loaded
+ * @param {function} callback
+ */
+ Images.prototype.setOnloadCallback = function(callback) {
+ this.callback = callback;
+ };
- var dx = Math.abs(this.from.x - this.to.x);
- var dy = Math.abs(this.from.y - this.to.y);
- if (type == 'discrete' || type == 'diagonalCross') {
- if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
- if (this.from.y > this.to.y) {
- if (this.from.x < this.to.x) {
- xVia = this.from.x + factor * dy;
- yVia = this.from.y - factor * dy;
- }
- else if (this.from.x > this.to.x) {
- xVia = this.from.x - factor * dy;
- yVia = this.from.y - factor * dy;
- }
- }
- else if (this.from.y < this.to.y) {
- if (this.from.x < this.to.x) {
- xVia = this.from.x + factor * dy;
- yVia = this.from.y + factor * dy;
- }
- else if (this.from.x > this.to.x) {
- xVia = this.from.x - factor * dy;
- yVia = this.from.y + factor * dy;
- }
- }
- if (type == "discrete") {
- xVia = dx < factor * dy ? this.from.x : xVia;
- }
- }
- else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
- if (this.from.y > this.to.y) {
- if (this.from.x < this.to.x) {
- xVia = this.from.x + factor * dx;
- yVia = this.from.y - factor * dx;
- }
- else if (this.from.x > this.to.x) {
- xVia = this.from.x - factor * dx;
- yVia = this.from.y - factor * dx;
- }
+ /**
+ *
+ * @param {string} url Url of the image
+ * @param {string} url Url of an image to use if the url image is not found
+ * @return {Image} img The image object
+ */
+ Images.prototype.load = function(url, brokenUrl) {
+ if (this.images[url] == undefined) {
+ // create the image
+ var me = this;
+ var img = new Image();
+ img.onload = function () {
+ if (me.callback) {
+ me.images[url] = img;
+ me.callback(this);
}
- else if (this.from.y < this.to.y) {
- if (this.from.x < this.to.x) {
- xVia = this.from.x + factor * dx;
- yVia = this.from.y + factor * dx;
- }
- else if (this.from.x > this.to.x) {
- xVia = this.from.x - factor * dx;
- yVia = this.from.y + factor * dx;
+ };
+
+ img.onerror = function () {
+ if (brokenUrl === undefined) {
+ console.error("Could not load image:", url);
+ delete this.src;
+ if (me.callback) {
+ me.callback(this);
}
}
- if (type == "discrete") {
- yVia = dy < factor * dx ? this.from.y : yVia;
- }
- }
- }
- else if (type == "straightCross") {
- if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) { // up - down
- xVia = this.from.x;
- if (this.from.y < this.to.y) {
- yVia = this.to.y - (1-factor) * dy;
- }
- else {
- yVia = this.to.y + (1-factor) * dy;
- }
- }
- else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) { // left - right
- if (this.from.x < this.to.x) {
- xVia = this.to.x - (1-factor) * dx;
- }
else {
- xVia = this.to.x + (1-factor) * dx;
+ this.src = brokenUrl;
}
- yVia = this.from.y;
- }
+ };
+
+ img.src = url;
}
- else if (type == 'horizontal') {
- if (this.from.x < this.to.x) {
- xVia = this.to.x - (1-factor) * dx;
- }
- else {
- xVia = this.to.x + (1-factor) * dx;
- }
- yVia = this.from.y;
+
+ return img;
+ };
+
+ module.exports = Images;
+
+
+/***/ },
+/* 56 */
+/***/ function(module, exports, __webpack_require__) {
+
+ /**
+ * Popup is a class to create a popup window with some text
+ * @param {Element} container The container object.
+ * @param {Number} [x]
+ * @param {Number} [y]
+ * @param {String} [text]
+ * @param {Object} [style] An object containing borderColor,
+ * backgroundColor, etc.
+ */
+ function Popup(container, x, y, text, style) {
+ if (container) {
+ this.container = container;
}
- else if (type == 'vertical') {
- xVia = this.from.x;
- if (this.from.y < this.to.y) {
- yVia = this.to.y - (1-factor) * dy;
- }
- else {
- yVia = this.to.y + (1-factor) * dy;
- }
+ else {
+ this.container = document.body;
}
- else { // continuous
- if (Math.abs(this.from.x - this.to.x) < Math.abs(this.from.y - this.to.y)) {
- if (this.from.y > this.to.y) {
- if (this.from.x < this.to.x) {
- // console.log(1)
- xVia = this.from.x + factor * dy;
- yVia = this.from.y - factor * dy;
- xVia = this.to.x < xVia ? this.to.x : xVia;
- }
- else if (this.from.x > this.to.x) {
- // console.log(2)
- xVia = this.from.x - factor * dy;
- yVia = this.from.y - factor * dy;
- xVia = this.to.x > xVia ? this.to.x :xVia;
- }
- }
- else if (this.from.y < this.to.y) {
- if (this.from.x < this.to.x) {
- // console.log(3)
- xVia = this.from.x + factor * dy;
- yVia = this.from.y + factor * dy;
- xVia = this.to.x < xVia ? this.to.x : xVia;
- }
- else if (this.from.x > this.to.x) {
- // console.log(4, this.from.x, this.to.x)
- xVia = this.from.x - factor * dy;
- yVia = this.from.y + factor * dy;
- xVia = this.to.x > xVia ? this.to.x : xVia;
- }
- }
- }
- else if (Math.abs(this.from.x - this.to.x) > Math.abs(this.from.y - this.to.y)) {
- if (this.from.y > this.to.y) {
- if (this.from.x < this.to.x) {
- // console.log(5)
- xVia = this.from.x + factor * dx;
- yVia = this.from.y - factor * dx;
- yVia = this.to.y > yVia ? this.to.y : yVia;
- }
- else if (this.from.x > this.to.x) {
- // console.log(6)
- xVia = this.from.x - factor * dx;
- yVia = this.from.y - factor * dx;
- yVia = this.to.y > yVia ? this.to.y : yVia;
- }
- }
- else if (this.from.y < this.to.y) {
- if (this.from.x < this.to.x) {
- // console.log(7)
- xVia = this.from.x + factor * dx;
- yVia = this.from.y + factor * dx;
- yVia = this.to.y < yVia ? this.to.y : yVia;
- }
- else if (this.from.x > this.to.x) {
- // console.log(8)
- xVia = this.from.x - factor * dx;
- yVia = this.from.y + factor * dx;
- yVia = this.to.y < yVia ? this.to.y : yVia;
+
+ // x, y and text are optional, see if a style object was passed in their place
+ if (style === undefined) {
+ if (typeof x === "object") {
+ style = x;
+ x = undefined;
+ } else if (typeof text === "object") {
+ style = text;
+ text = undefined;
+ } else {
+ // for backwards compatibility, in case clients other than Network are creating Popup directly
+ style = {
+ fontColor: 'black',
+ fontSize: 14, // px
+ fontFace: 'verdana',
+ color: {
+ border: '#666',
+ background: '#FFFFC6'
}
}
}
}
+ this.x = 0;
+ this.y = 0;
+ this.padding = 5;
+
+ if (x !== undefined && y !== undefined ) {
+ this.setPosition(x, y);
+ }
+ if (text !== undefined) {
+ this.setText(text);
+ }
+
+ // create the frame
+ this.frame = document.createElement("div");
+ var styleAttr = this.frame.style;
+ styleAttr.position = "absolute";
+ styleAttr.visibility = "hidden";
+ styleAttr.border = "1px solid " + style.color.border;
+ styleAttr.color = style.fontColor;
+ styleAttr.fontSize = style.fontSize + "px";
+ styleAttr.fontFamily = style.fontFace;
+ styleAttr.padding = this.padding + "px";
+ styleAttr.backgroundColor = style.color.background;
+ styleAttr.borderRadius = "3px";
+ styleAttr.MozBorderRadius = "3px";
+ styleAttr.WebkitBorderRadius = "3px";
+ styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
+ styleAttr.whiteSpace = "nowrap";
+ this.container.appendChild(this.frame);
+ }
- return {x:xVia, y:yVia};
+ /**
+ * @param {number} x Horizontal position of the popup window
+ * @param {number} y Vertical position of the popup window
+ */
+ Popup.prototype.setPosition = function(x, y) {
+ this.x = parseInt(x);
+ this.y = parseInt(y);
};
/**
- * Draw a line between two nodes
- * @param {CanvasRenderingContext2D} ctx
- * @private
+ * Set the content for the popup window. This can be HTML code or text.
+ * @param {string | Element} content
*/
- Edge.prototype._line = function (ctx) {
- // draw a straight line
- ctx.beginPath();
- ctx.moveTo(this.from.x, this.from.y);
- if (this.options.smoothCurves.enabled == true) {
- if (this.options.smoothCurves.dynamic == false) {
- var via = this._getViaCoordinates();
- if (via.x == null) {
- ctx.lineTo(this.to.x, this.to.y);
- ctx.stroke();
- return null;
- }
- else {
- // this.via.x = via.x;
- // this.via.y = via.y;
- ctx.quadraticCurveTo(via.x,via.y,this.to.x, this.to.y);
- ctx.stroke();
- return via;
- }
- }
- else {
- ctx.quadraticCurveTo(this.via.x,this.via.y,this.to.x, this.to.y);
- ctx.stroke();
- return this.via;
- }
+ Popup.prototype.setText = function(content) {
+ if (content instanceof Element) {
+ this.frame.innerHTML = '';
+ this.frame.appendChild(content);
}
else {
- ctx.lineTo(this.to.x, this.to.y);
- ctx.stroke();
- return null;
+ this.frame.innerHTML = content; // string containing text or HTML
}
};
/**
- * Draw a line from a node to itself, a circle
- * @param {CanvasRenderingContext2D} ctx
- * @param {Number} x
- * @param {Number} y
- * @param {Number} radius
- * @private
- */
- Edge.prototype._circle = function (ctx, x, y, radius) {
- // draw a circle
- ctx.beginPath();
- ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
- ctx.stroke();
- };
-
- /**
- * Draw label with white background and with the middle at (x, y)
- * @param {CanvasRenderingContext2D} ctx
- * @param {String} text
- * @param {Number} x
- * @param {Number} y
- * @private
+ * Show the popup window
+ * @param {boolean} show Optional. Show or hide the window
*/
- Edge.prototype._label = function (ctx, text, x, y) {
- if (text) {
- ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
- this.options.fontSize + "px " + this.options.fontFace;
- var yLine;
-
- if (this.dirtyLabel == true) {
- var lines = String(text).split('\n');
- var lineCount = lines.length;
- var fontSize = (Number(this.options.fontSize) + 4);
- yLine = y + (1 - lineCount) / 2 * fontSize;
+ Popup.prototype.show = function (show) {
+ if (show === undefined) {
+ show = true;
+ }
- var width = ctx.measureText(lines[0]).width;
- for (var i = 1; i < lineCount; i++) {
- var lineWidth = ctx.measureText(lines[i]).width;
- width = lineWidth > width ? lineWidth : width;
- }
- var height = this.options.fontSize * lineCount;
- var left = x - width / 2;
- var top = y - height / 2;
+ if (show) {
+ var height = this.frame.clientHeight;
+ var width = this.frame.clientWidth;
+ var maxHeight = this.frame.parentNode.clientHeight;
+ var maxWidth = this.frame.parentNode.clientWidth;
- // cache
- this.labelDimensions = {top:top,left:left,width:width,height:height,yLine:yLine};
+ var top = (this.y - height);
+ if (top + height + this.padding > maxHeight) {
+ top = maxHeight - height - this.padding;
}
-
-
- if (this.options.fontFill !== undefined && this.options.fontFill !== null && this.options.fontFill !== "none") {
- ctx.fillStyle = this.options.fontFill;
- ctx.fillRect(this.labelDimensions.left,
- this.labelDimensions.top,
- this.labelDimensions.width,
- this.labelDimensions.height);
+ if (top < this.padding) {
+ top = this.padding;
}
- // draw text
- ctx.fillStyle = this.options.fontColor || "black";
- ctx.textAlign = "center";
- ctx.textBaseline = "middle";
- yLine = this.labelDimensions.yLine;
- for (var i = 0; i < lineCount; i++) {
- ctx.fillText(lines[i], x, yLine);
- yLine += fontSize;
+ var left = this.x;
+ if (left + width + this.padding > maxWidth) {
+ left = maxWidth - width - this.padding;
+ }
+ if (left < this.padding) {
+ left = this.padding;
}
+
+ this.frame.style.left = left + "px";
+ this.frame.style.top = top + "px";
+ this.frame.style.visibility = "visible";
+ }
+ else {
+ this.hide();
}
};
/**
- * Redraw a edge as a dashed line
- * Draw this edge in the given canvas
- * @author David Jordan
- * @date 2012-08-08
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D} ctx
- * @private
+ * Hide the popup window
*/
- Edge.prototype._drawDashLine = function(ctx) {
- // set style
- ctx.strokeStyle = this._getColor();
- ctx.lineWidth = this._getLineWidth();
+ Popup.prototype.hide = function () {
+ this.frame.style.visibility = "hidden";
+ };
- var via = null;
- // only firefox and chrome support this method, else we use the legacy one.
- if (ctx.mozDash !== undefined || ctx.setLineDash !== undefined) {
- // configure the dash pattern
- var pattern = [0];
- if (this.options.dash.length !== undefined && this.options.dash.gap !== undefined) {
- pattern = [this.options.dash.length,this.options.dash.gap];
- }
- else {
- pattern = [5,5];
- }
+ module.exports = Popup;
- // set dash settings for chrome or firefox
- if (typeof ctx.setLineDash !== 'undefined') { //Chrome
- ctx.setLineDash(pattern);
- ctx.lineDashOffset = 0;
- } else { //Firefox
- ctx.mozDash = pattern;
- ctx.mozDashOffset = 0;
- }
+/***/ },
+/* 57 */
+/***/ function(module, exports, __webpack_require__) {
- // draw the line
- via = this._line(ctx);
+ /**
+ * Parse a text source containing data in DOT language into a JSON object.
+ * The object contains two lists: one with nodes and one with edges.
+ *
+ * DOT language reference: http://www.graphviz.org/doc/info/lang.html
+ *
+ * @param {String} data Text containing a graph in DOT-notation
+ * @return {Object} graph An object containing two parameters:
+ * {Object[]} nodes
+ * {Object[]} edges
+ */
+ function parseDOT (data) {
+ dot = data;
+ return parseGraph();
+ }
- // restore the dash settings.
- if (typeof ctx.setLineDash !== 'undefined') { //Chrome
- ctx.setLineDash([0]);
- ctx.lineDashOffset = 0;
+ // token types enumeration
+ var TOKENTYPE = {
+ NULL : 0,
+ DELIMITER : 1,
+ IDENTIFIER: 2,
+ UNKNOWN : 3
+ };
- } else { //Firefox
- ctx.mozDash = [0];
- ctx.mozDashOffset = 0;
- }
- }
- else { // unsupporting smooth lines
- // draw dashed line
- ctx.beginPath();
- ctx.lineCap = 'round';
- if (this.options.dash.altLength !== undefined) //If an alt dash value has been set add to the array this value
- {
- ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
- [this.options.dash.length,this.options.dash.gap,this.options.dash.altLength,this.options.dash.gap]);
- }
- else if (this.options.dash.length !== undefined && this.options.dash.gap !== undefined) //If a dash and gap value has been set add to the array this value
- {
- ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
- [this.options.dash.length,this.options.dash.gap]);
- }
- else //If all else fails draw a line
- {
- ctx.moveTo(this.from.x, this.from.y);
- ctx.lineTo(this.to.x, this.to.y);
- }
- ctx.stroke();
- }
+ // map with all delimiters
+ var DELIMITERS = {
+ '{': true,
+ '}': true,
+ '[': true,
+ ']': true,
+ ';': true,
+ '=': true,
+ ',': true,
- // draw label
- if (this.label) {
- var point;
- if (this.options.smoothCurves.enabled == true && via != null) {
- var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
- var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
- point = {x:midpointX, y:midpointY};
- }
- else {
- point = this._pointOnLine(0.5);
- }
- this._label(ctx, this.label, point.x, point.y);
- }
+ '->': true,
+ '--': true
};
+ var dot = ''; // current dot file
+ var index = 0; // current index in dot file
+ var c = ''; // current token character in expr
+ var token = ''; // current token
+ var tokenType = TOKENTYPE.NULL; // type of the token
+
/**
- * Get a point on a line
- * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
- * @return {Object} point
- * @private
+ * Get the first character from the dot file.
+ * The character is stored into the char c. If the end of the dot file is
+ * reached, the function puts an empty string in c.
*/
- Edge.prototype._pointOnLine = function (percentage) {
- return {
- x: (1 - percentage) * this.from.x + percentage * this.to.x,
- y: (1 - percentage) * this.from.y + percentage * this.to.y
- }
- };
+ function first() {
+ index = 0;
+ c = dot.charAt(0);
+ }
/**
- * Get a point on a circle
- * @param {Number} x
- * @param {Number} y
- * @param {Number} radius
- * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
- * @return {Object} point
- * @private
+ * Get the next character from the dot file.
+ * The character is stored into the char c. If the end of the dot file is
+ * reached, the function puts an empty string in c.
*/
- Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
- var angle = (percentage - 3/8) * 2 * Math.PI;
- return {
- x: x + radius * Math.cos(angle),
- y: y - radius * Math.sin(angle)
- }
- };
+ function next() {
+ index++;
+ c = dot.charAt(index);
+ }
/**
- * Redraw a edge as a line with an arrow halfway the line
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D} ctx
- * @private
+ * Preview the next character from the dot file.
+ * @return {String} cNext
*/
- Edge.prototype._drawArrowCenter = function(ctx) {
- var point;
- // set style
- ctx.strokeStyle = this._getColor();
- ctx.fillStyle = ctx.strokeStyle;
- ctx.lineWidth = this._getLineWidth();
+ function nextPreview() {
+ return dot.charAt(index + 1);
+ }
- if (this.from != this.to) {
- // draw line
- var via = this._line(ctx);
+ /**
+ * Test whether given character is alphabetic or numeric
+ * @param {String} c
+ * @return {Boolean} isAlphaNumeric
+ */
+ var regexAlphaNumeric = /[a-zA-Z_0-9.:#]/;
+ function isAlphaNumeric(c) {
+ return regexAlphaNumeric.test(c);
+ }
- var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
- var length = (10 + 5 * this.options.width) * this.options.arrowScaleFactor;
- // draw an arrow halfway the line
- if (this.options.smoothCurves.enabled == true && via != null) {
- var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
- var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
- point = {x:midpointX, y:midpointY};
+ /**
+ * Merge all properties of object b into object b
+ * @param {Object} a
+ * @param {Object} b
+ * @return {Object} a
+ */
+ function merge (a, b) {
+ if (!a) {
+ a = {};
+ }
+
+ if (b) {
+ for (var name in b) {
+ if (b.hasOwnProperty(name)) {
+ a[name] = b[name];
+ }
+ }
+ }
+ return a;
+ }
+
+ /**
+ * Set a value in an object, where the provided parameter name can be a
+ * path with nested parameters. For example:
+ *
+ * var obj = {a: 2};
+ * setValue(obj, 'b.c', 3); // obj = {a: 2, b: {c: 3}}
+ *
+ * @param {Object} obj
+ * @param {String} path A parameter name or dot-separated parameter path,
+ * like "color.highlight.border".
+ * @param {*} value
+ */
+ function setValue(obj, path, value) {
+ var keys = path.split('.');
+ var o = obj;
+ while (keys.length) {
+ var key = keys.shift();
+ if (keys.length) {
+ // this isn't the end point
+ if (!o[key]) {
+ o[key] = {};
+ }
+ o = o[key];
}
else {
- point = this._pointOnLine(0.5);
+ // this is the end point
+ o[key] = value;
}
+ }
+ }
- ctx.arrow(point.x, point.y, angle, length);
- ctx.fill();
- ctx.stroke();
+ /**
+ * Add a node to a graph object. If there is already a node with
+ * the same id, their attributes will be merged.
+ * @param {Object} graph
+ * @param {Object} node
+ */
+ function addNode(graph, node) {
+ var i, len;
+ var current = null;
- // draw label
- if (this.label) {
- this._label(ctx, this.label, point.x, point.y);
- }
+ // find root graph (in case of subgraph)
+ var graphs = [graph]; // list with all graphs from current graph to root graph
+ var root = graph;
+ while (root.parent) {
+ graphs.push(root.parent);
+ root = root.parent;
}
- else {
- // draw circle
- var x, y;
- var radius = 0.25 * Math.max(100,this.physics.springLength);
- var node = this.from;
- if (!node.width) {
- node.resize(ctx);
- }
- if (node.width > node.height) {
- x = node.x + node.width * 0.5;
- y = node.y - radius;
+
+ // find existing node (at root level) by its id
+ if (root.nodes) {
+ for (i = 0, len = root.nodes.length; i < len; i++) {
+ if (node.id === root.nodes[i].id) {
+ current = root.nodes[i];
+ break;
+ }
}
- else {
- x = node.x + radius;
- y = node.y - node.height * 0.5;
+ }
+
+ if (!current) {
+ // this is a new node
+ current = {
+ id: node.id
+ };
+ if (graph.node) {
+ // clone default attributes
+ current.attr = merge(current.attr, graph.node);
}
- this._circle(ctx, x, y, radius);
+ }
- // draw all arrows
- var angle = 0.2 * Math.PI;
- var length = (10 + 5 * this.options.width) * this.options.arrowScaleFactor;
- point = this._pointOnCircle(x, y, radius, 0.5);
- ctx.arrow(point.x, point.y, angle, length);
- ctx.fill();
- ctx.stroke();
+ // add node to this (sub)graph and all its parent graphs
+ for (i = graphs.length - 1; i >= 0; i--) {
+ var g = graphs[i];
- // draw label
- if (this.label) {
- point = this._pointOnCircle(x, y, radius, 0.5);
- this._label(ctx, this.label, point.x, point.y);
+ if (!g.nodes) {
+ g.nodes = [];
+ }
+ if (g.nodes.indexOf(current) == -1) {
+ g.nodes.push(current);
}
}
- };
-
+ // merge attributes
+ if (node.attr) {
+ current.attr = merge(current.attr, node.attr);
+ }
+ }
/**
- * Redraw a edge as a line with an arrow
- * Draw this edge in the given canvas
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
- * @param {CanvasRenderingContext2D} ctx
- * @private
+ * Add an edge to a graph object
+ * @param {Object} graph
+ * @param {Object} edge
*/
- Edge.prototype._drawArrow = function(ctx) {
- // set style
- ctx.strokeStyle = this._getColor();
- ctx.fillStyle = ctx.strokeStyle;
- ctx.lineWidth = this._getLineWidth();
-
- var angle, length;
- //draw a line
- if (this.from != this.to) {
- angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
- var dx = (this.to.x - this.from.x);
- var dy = (this.to.y - this.from.y);
- var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
+ function addEdge(graph, edge) {
+ if (!graph.edges) {
+ graph.edges = [];
+ }
+ graph.edges.push(edge);
+ if (graph.edge) {
+ var attr = merge({}, graph.edge); // clone default attributes
+ edge.attr = merge(attr, edge.attr); // merge attributes
+ }
+ }
- var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
- var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
- var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
- var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
+ /**
+ * Create an edge to a graph object
+ * @param {Object} graph
+ * @param {String | Number | Object} from
+ * @param {String | Number | Object} to
+ * @param {String} type
+ * @param {Object | null} attr
+ * @return {Object} edge
+ */
+ function createEdge(graph, from, to, type, attr) {
+ var edge = {
+ from: from,
+ to: to,
+ type: type
+ };
- var via;
- if (this.options.smoothCurves.dynamic == true && this.options.smoothCurves.enabled == true ) {
- via = this.via;
- }
- else if (this.options.smoothCurves.enabled == true) {
- via = this._getViaCoordinates();
- }
+ if (graph.edge) {
+ edge.attr = merge({}, graph.edge); // clone default attributes
+ }
+ edge.attr = merge(edge.attr || {}, attr); // merge attributes
- if (this.options.smoothCurves.enabled == true && via.x != null) {
- angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
- dx = (this.to.x - via.x);
- dy = (this.to.y - via.y);
- edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
- }
- var toBorderDist = this.to.distanceToBorder(ctx, angle);
- var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
+ return edge;
+ }
- var xTo,yTo;
- if (this.options.smoothCurves.enabled == true && via.x != null) {
- xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
- yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
- }
- else {
- xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
- yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
- }
+ /**
+ * Get next token in the current dot file.
+ * The token and token type are available as token and tokenType
+ */
+ function getToken() {
+ tokenType = TOKENTYPE.NULL;
+ token = '';
- ctx.beginPath();
- ctx.moveTo(xFrom,yFrom);
- if (this.options.smoothCurves.enabled == true && via.x != null) {
- ctx.quadraticCurveTo(via.x,via.y,xTo, yTo);
- }
- else {
- ctx.lineTo(xTo, yTo);
- }
- ctx.stroke();
+ // skip over whitespaces
+ while (c == ' ' || c == '\t' || c == '\n' || c == '\r') { // space, tab, enter
+ next();
+ }
- // draw arrow at the end of the line
- length = (10 + 5 * this.options.width) * this.options.arrowScaleFactor;
- ctx.arrow(xTo, yTo, angle, length);
- ctx.fill();
- ctx.stroke();
+ do {
+ var isComment = false;
- // draw label
- if (this.label) {
- var point;
- if (this.options.smoothCurves.enabled == true && via != null) {
- var midpointX = 0.5*(0.5*(this.from.x + via.x) + 0.5*(this.to.x + via.x));
- var midpointY = 0.5*(0.5*(this.from.y + via.y) + 0.5*(this.to.y + via.y));
- point = {x:midpointX, y:midpointY};
+ // skip comment
+ if (c == '#') {
+ // find the previous non-space character
+ var i = index - 1;
+ while (dot.charAt(i) == ' ' || dot.charAt(i) == '\t') {
+ i--;
}
- else {
- point = this._pointOnLine(0.5);
+ if (dot.charAt(i) == '\n' || dot.charAt(i) == '') {
+ // the # is at the start of a line, this is indeed a line comment
+ while (c != '' && c != '\n') {
+ next();
+ }
+ isComment = true;
}
- this._label(ctx, this.label, point.x, point.y);
}
- }
- else {
- // draw circle
- var node = this.from;
- var x, y, arrow;
- var radius = 0.25 * Math.max(100,this.physics.springLength);
- if (!node.width) {
- node.resize(ctx);
+ if (c == '/' && nextPreview() == '/') {
+ // skip line comment
+ while (c != '' && c != '\n') {
+ next();
+ }
+ isComment = true;
}
- if (node.width > node.height) {
- x = node.x + node.width * 0.5;
- y = node.y - radius;
- arrow = {
- x: x,
- y: node.y,
- angle: 0.9 * Math.PI
- };
+ if (c == '/' && nextPreview() == '*') {
+ // skip block comment
+ while (c != '') {
+ if (c == '*' && nextPreview() == '/') {
+ // end of block comment found. skip these last two characters
+ next();
+ next();
+ break;
+ }
+ else {
+ next();
+ }
+ }
+ isComment = true;
}
- else {
- x = node.x + radius;
- y = node.y - node.height * 0.5;
- arrow = {
- x: node.x,
- y: y,
- angle: 0.6 * Math.PI
- };
+
+ // skip over whitespaces
+ while (c == ' ' || c == '\t' || c == '\n' || c == '\r') { // space, tab, enter
+ next();
}
- ctx.beginPath();
- // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
- ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
- ctx.stroke();
+ }
+ while (isComment);
- // draw all arrows
- var length = (10 + 5 * this.options.width) * this.options.arrowScaleFactor;
- ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
- ctx.fill();
- ctx.stroke();
+ // check for end of dot file
+ if (c == '') {
+ // token is still empty
+ tokenType = TOKENTYPE.DELIMITER;
+ return;
+ }
- // draw label
- if (this.label) {
- point = this._pointOnCircle(x, y, radius, 0.5);
- this._label(ctx, this.label, point.x, point.y);
- }
+ // check for delimiters consisting of 2 characters
+ var c2 = c + nextPreview();
+ if (DELIMITERS[c2]) {
+ tokenType = TOKENTYPE.DELIMITER;
+ token = c2;
+ next();
+ next();
+ return;
}
- };
+ // check for delimiters consisting of 1 character
+ if (DELIMITERS[c]) {
+ tokenType = TOKENTYPE.DELIMITER;
+ token = c;
+ next();
+ return;
+ }
+ // check for an identifier (number or string)
+ // TODO: more precise parsing of numbers/strings (and the port separator ':')
+ if (isAlphaNumeric(c) || c == '-') {
+ token += c;
+ next();
- /**
- * Calculate the distance between a point (x3,y3) and a line segment from
- * (x1,y1) to (x2,y2).
- * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
- * @param {number} x1
- * @param {number} y1
- * @param {number} x2
- * @param {number} y2
- * @param {number} x3
- * @param {number} y3
- * @private
- */
- Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
- var returnValue = 0;
- if (this.from != this.to) {
- if (this.options.smoothCurves.enabled == true) {
- var xVia, yVia;
- if (this.options.smoothCurves.enabled == true && this.options.smoothCurves.dynamic == true) {
- xVia = this.via.x;
- yVia = this.via.y;
- }
- else {
- var via = this._getViaCoordinates();
- xVia = via.x;
- yVia = via.y;
- }
- var minDistance = 1e9;
- var distance;
- var i,t,x,y, lastX, lastY;
- for (i = 0; i < 10; i++) {
- t = 0.1*i;
- x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*xVia + Math.pow(t,2)*x2;
- y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*yVia + Math.pow(t,2)*y2;
- if (i > 0) {
- distance = this._getDistanceToLine(lastX,lastY,x,y, x3,y3);
- minDistance = distance < minDistance ? distance : minDistance;
- }
- lastX = x; lastY = y;
- }
- returnValue = minDistance;
+ while (isAlphaNumeric(c)) {
+ token += c;
+ next();
}
- else {
- returnValue = this._getDistanceToLine(x1,y1,x2,y2,x3,y3);
+ if (token == 'false') {
+ token = false; // convert to boolean
+ }
+ else if (token == 'true') {
+ token = true; // convert to boolean
+ }
+ else if (!isNaN(Number(token))) {
+ token = Number(token); // convert to number
}
+ tokenType = TOKENTYPE.IDENTIFIER;
+ return;
}
- else {
- var x, y, dx, dy;
- var radius = 0.25 * this.physics.springLength;
- var node = this.from;
- if (node.width > node.height) {
- x = node.x + 0.5 * node.width;
- y = node.y - radius;
+
+ // check for a string enclosed by double quotes
+ if (c == '"') {
+ next();
+ while (c != '' && (c != '"' || (c == '"' && nextPreview() == '"'))) {
+ token += c;
+ if (c == '"') { // skip the escape character
+ next();
+ }
+ next();
}
- else {
- x = node.x + radius;
- y = node.y - 0.5 * node.height;
+ if (c != '"') {
+ throw newSyntaxError('End of string " expected');
}
- dx = x - x3;
- dy = y - y3;
- returnValue = Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
+ next();
+ tokenType = TOKENTYPE.IDENTIFIER;
+ return;
}
- if (this.labelDimensions.left < x3 &&
- this.labelDimensions.left + this.labelDimensions.width > x3 &&
- this.labelDimensions.top < y3 &&
- this.labelDimensions.top + this.labelDimensions.height > y3) {
- return 0;
- }
- else {
- return returnValue;
+ // something unknown is found, wrong characters, a syntax error
+ tokenType = TOKENTYPE.UNKNOWN;
+ while (c != '') {
+ token += c;
+ next();
}
- };
+ throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
+ }
- Edge.prototype._getDistanceToLine = function(x1,y1,x2,y2,x3,y3) {
- var px = x2-x1,
- py = y2-y1,
- something = px*px + py*py,
- u = ((x3 - x1) * px + (y3 - y1) * py) / something;
+ /**
+ * Parse a graph.
+ * @returns {Object} graph
+ */
+ function parseGraph() {
+ var graph = {};
- if (u > 1) {
- u = 1;
+ first();
+ getToken();
+
+ // optional strict keyword
+ if (token == 'strict') {
+ graph.strict = true;
+ getToken();
}
- else if (u < 0) {
- u = 0;
+
+ // graph or digraph keyword
+ if (token == 'graph' || token == 'digraph') {
+ graph.type = token;
+ getToken();
}
- var x = x1 + u * px,
- y = y1 + u * py,
- dx = x - x3,
- dy = y - y3;
+ // optional graph id
+ if (tokenType == TOKENTYPE.IDENTIFIER) {
+ graph.id = token;
+ getToken();
+ }
- //# Note: If the actual distance does not matter,
- //# if you only want to compare what this function
- //# returns to other results of this function, you
- //# can just return the squared distance instead
- //# (i.e. remove the sqrt) to gain a little performance
+ // open angle bracket
+ if (token != '{') {
+ throw newSyntaxError('Angle bracket { expected');
+ }
+ getToken();
- return Math.sqrt(dx*dx + dy*dy);
- };
+ // statements
+ parseStatements(graph);
- /**
- * This allows the zoom level of the network to influence the rendering
- *
- * @param scale
- */
- Edge.prototype.setScale = function(scale) {
- this.networkScaleInv = 1.0/scale;
- };
+ // close angle bracket
+ if (token != '}') {
+ throw newSyntaxError('Angle bracket } expected');
+ }
+ getToken();
+ // end of file
+ if (token !== '') {
+ throw newSyntaxError('End of file expected');
+ }
+ getToken();
- Edge.prototype.select = function() {
- this.selected = true;
- };
+ // remove temporary default properties
+ delete graph.node;
+ delete graph.edge;
+ delete graph.graph;
- Edge.prototype.unselect = function() {
- this.selected = false;
- };
+ return graph;
+ }
- Edge.prototype.positionBezierNode = function() {
- if (this.via !== null && this.from !== null && this.to !== null) {
- this.via.x = 0.5 * (this.from.x + this.to.x);
- this.via.y = 0.5 * (this.from.y + this.to.y);
- }
- else {
- this.via.x = 0;
- this.via.y = 0;
+ /**
+ * Parse a list with statements.
+ * @param {Object} graph
+ */
+ function parseStatements (graph) {
+ while (token !== '' && token != '}') {
+ parseStatement(graph);
+ if (token == ';') {
+ getToken();
+ }
}
- };
+ }
/**
- * This function draws the control nodes for the manipulator.
- * In order to enable this, only set the this.controlNodesEnabled to true.
- * @param ctx
+ * Parse a single statement. Can be a an attribute statement, node
+ * statement, a series of node statements and edge statements, or a
+ * parameter.
+ * @param {Object} graph
*/
- Edge.prototype._drawControlNodes = function(ctx) {
- if (this.controlNodesEnabled == true) {
- if (this.controlNodes.from === null && this.controlNodes.to === null) {
- var nodeIdFrom = "edgeIdFrom:".concat(this.id);
- var nodeIdTo = "edgeIdTo:".concat(this.id);
- var constants = {
- nodes:{group:'', radius:8},
- physics:{damping:0},
- clustering: {maxNodeSizeIncrements: 0 ,nodeScaling: {width:0, height: 0, radius:0}}
- };
- this.controlNodes.from = new Node(
- {id:nodeIdFrom,
- shape:'dot',
- color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
- },{},{},constants);
- this.controlNodes.to = new Node(
- {id:nodeIdTo,
- shape:'dot',
- color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
- },{},{},constants);
- }
+ function parseStatement(graph) {
+ // parse subgraph
+ var subgraph = parseSubgraph(graph);
+ if (subgraph) {
+ // edge statements
+ parseEdge(graph, subgraph);
- if (this.controlNodes.from.selected == false && this.controlNodes.to.selected == false) {
- this.controlNodes.positions = this.getControlNodePositions(ctx);
- this.controlNodes.from.x = this.controlNodes.positions.from.x;
- this.controlNodes.from.y = this.controlNodes.positions.from.y;
- this.controlNodes.to.x = this.controlNodes.positions.to.x;
- this.controlNodes.to.y = this.controlNodes.positions.to.y;
- }
+ return;
+ }
- this.controlNodes.from.draw(ctx);
- this.controlNodes.to.draw(ctx);
+ // parse an attribute statement
+ var attr = parseAttributeStatement(graph);
+ if (attr) {
+ return;
+ }
+
+ // parse node
+ if (tokenType != TOKENTYPE.IDENTIFIER) {
+ throw newSyntaxError('Identifier expected');
+ }
+ var id = token; // id can be a string or a number
+ getToken();
+
+ if (token == '=') {
+ // id statement
+ getToken();
+ if (tokenType != TOKENTYPE.IDENTIFIER) {
+ throw newSyntaxError('Identifier expected');
+ }
+ graph[id] = token;
+ getToken();
+ // TODO: implement comma separated list with "a_list: ID=ID [','] [a_list] "
}
else {
- this.controlNodes = {from:null, to:null, positions:{}};
+ parseNodeStatement(graph, id);
}
- };
+ }
/**
- * Enable control nodes.
- * @private
+ * Parse a subgraph
+ * @param {Object} graph parent graph object
+ * @return {Object | null} subgraph
*/
- Edge.prototype._enableControlNodes = function() {
- this.fromBackup = this.from;
- this.toBackup = this.to;
- this.controlNodesEnabled = true;
- };
+ function parseSubgraph (graph) {
+ var subgraph = null;
- /**
- * disable control nodes and remove from dynamicEdges from old node
- * @private
- */
- Edge.prototype._disableControlNodes = function() {
- this.fromId = this.from.id;
- this.toId = this.to.id;
- if (this.fromId != this.fromBackup.id) { // from was changed, remove edge from old 'from' node dynamic edges
- this.fromBackup.detachEdge(this);
- }
- else if (this.toId != this.toBackup.id) { // to was changed, remove edge from old 'to' node dynamic edges
- this.toBackup.detachEdge(this);
+ // optional subgraph keyword
+ if (token == 'subgraph') {
+ subgraph = {};
+ subgraph.type = 'subgraph';
+ getToken();
+
+ // optional graph id
+ if (tokenType == TOKENTYPE.IDENTIFIER) {
+ subgraph.id = token;
+ getToken();
+ }
}
- this.fromBackup = null;
- this.toBackup = null;
- this.controlNodesEnabled = false;
- };
+ // open angle bracket
+ if (token == '{') {
+ getToken();
+
+ if (!subgraph) {
+ subgraph = {};
+ }
+ subgraph.parent = graph;
+ subgraph.node = graph.node;
+ subgraph.edge = graph.edge;
+ subgraph.graph = graph.graph;
+
+ // statements
+ parseStatements(subgraph);
+
+ // close angle bracket
+ if (token != '}') {
+ throw newSyntaxError('Angle bracket } expected');
+ }
+ getToken();
+
+ // remove temporary default properties
+ delete subgraph.node;
+ delete subgraph.edge;
+ delete subgraph.graph;
+ delete subgraph.parent;
+
+ // register at the parent graph
+ if (!graph.subgraphs) {
+ graph.subgraphs = [];
+ }
+ graph.subgraphs.push(subgraph);
+ }
+ return subgraph;
+ }
/**
- * This checks if one of the control nodes is selected and if so, returns the control node object. Else it returns null.
- * @param x
- * @param y
- * @returns {null}
- * @private
+ * parse an attribute statement like "node [shape=circle fontSize=16]".
+ * Available keywords are 'node', 'edge', 'graph'.
+ * The previous list with default attributes will be replaced
+ * @param {Object} graph
+ * @returns {String | null} keyword Returns the name of the parsed attribute
+ * (node, edge, graph), or null if nothing
+ * is parsed.
*/
- Edge.prototype._getSelectedControlNode = function(x,y) {
- var positions = this.controlNodes.positions;
- var fromDistance = Math.sqrt(Math.pow(x - positions.from.x,2) + Math.pow(y - positions.from.y,2));
- var toDistance = Math.sqrt(Math.pow(x - positions.to.x ,2) + Math.pow(y - positions.to.y ,2));
+ function parseAttributeStatement (graph) {
+ // attribute statements
+ if (token == 'node') {
+ getToken();
- if (fromDistance < 15) {
- this.connectedNode = this.from;
- this.from = this.controlNodes.from;
- return this.controlNodes.from;
+ // node attributes
+ graph.node = parseAttributeList();
+ return 'node';
}
- else if (toDistance < 15) {
- this.connectedNode = this.to;
- this.to = this.controlNodes.to;
- return this.controlNodes.to;
+ else if (token == 'edge') {
+ getToken();
+
+ // edge attributes
+ graph.edge = parseAttributeList();
+ return 'edge';
}
- else {
- return null;
+ else if (token == 'graph') {
+ getToken();
+
+ // graph attributes
+ graph.graph = parseAttributeList();
+ return 'graph';
}
- };
+ return null;
+ }
/**
- * this resets the control nodes to their original position.
- * @private
+ * parse a node statement
+ * @param {Object} graph
+ * @param {String | Number} id
*/
- Edge.prototype._restoreControlNodes = function() {
- if (this.controlNodes.from.selected == true) {
- this.from = this.connectedNode;
- this.connectedNode = null;
- this.controlNodes.from.unselect();
- }
- else if (this.controlNodes.to.selected == true) {
- this.to = this.connectedNode;
- this.connectedNode = null;
- this.controlNodes.to.unselect();
+ function parseNodeStatement(graph, id) {
+ // node statement
+ var node = {
+ id: id
+ };
+ var attr = parseAttributeList();
+ if (attr) {
+ node.attr = attr;
}
- };
+ addNode(graph, node);
+
+ // edge statements
+ parseEdge(graph, id);
+ }
/**
- * this calculates the position of the control nodes on the edges of the parent nodes.
- *
- * @param ctx
- * @returns {{from: {x: number, y: number}, to: {x: *, y: *}}}
+ * Parse an edge or a series of edges
+ * @param {Object} graph
+ * @param {String | Number} from Id of the from node
*/
- Edge.prototype.getControlNodePositions = function(ctx) {
- var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
- var dx = (this.to.x - this.from.x);
- var dy = (this.to.y - this.from.y);
- var edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
- var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
- var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
- var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
- var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
-
- var via;
- if (this.options.smoothCurves.dynamic == true && this.options.smoothCurves.enabled == true) {
- via = this.via;
- }
- else if (this.options.smoothCurves.enabled == true) {
- via = this._getViaCoordinates();
- }
-
- if (this.options.smoothCurves.enabled == true && via.x != null) {
- angle = Math.atan2((this.to.y - via.y), (this.to.x - via.x));
- dx = (this.to.x - via.x);
- dy = (this.to.y - via.y);
- edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
- }
- var toBorderDist = this.to.distanceToBorder(ctx, angle);
- var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
+ function parseEdge(graph, from) {
+ while (token == '->' || token == '--') {
+ var to;
+ var type = token;
+ getToken();
- var xTo,yTo;
- if (this.options.smoothCurves.enabled == true && via.x != null) {
- xTo = (1 - toBorderPoint) * via.x + toBorderPoint * this.to.x;
- yTo = (1 - toBorderPoint) * via.y + toBorderPoint * this.to.y;
- }
- else {
- xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
- yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
- }
+ var subgraph = parseSubgraph(graph);
+ if (subgraph) {
+ to = subgraph;
+ }
+ else {
+ if (tokenType != TOKENTYPE.IDENTIFIER) {
+ throw newSyntaxError('Identifier or subgraph expected');
+ }
+ to = token;
+ addNode(graph, {
+ id: to
+ });
+ getToken();
+ }
- return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}};
- };
+ // parse edge attributes
+ var attr = parseAttributeList();
- module.exports = Edge;
+ // create edge
+ var edge = createEdge(graph, from, to, type, attr);
+ addEdge(graph, edge);
-/***/ },
-/* 58 */
-/***/ function(module, exports, __webpack_require__) {
+ from = to;
+ }
+ }
/**
- * Popup is a class to create a popup window with some text
- * @param {Element} container The container object.
- * @param {Number} [x]
- * @param {Number} [y]
- * @param {String} [text]
- * @param {Object} [style] An object containing borderColor,
- * backgroundColor, etc.
+ * Parse a set with attributes,
+ * for example [label="1.000", shape=solid]
+ * @return {Object | null} attr
*/
- function Popup(container, x, y, text, style) {
- if (container) {
- this.container = container;
- }
- else {
- this.container = document.body;
- }
+ function parseAttributeList() {
+ var attr = null;
- // x, y and text are optional, see if a style object was passed in their place
- if (style === undefined) {
- if (typeof x === "object") {
- style = x;
- x = undefined;
- } else if (typeof text === "object") {
- style = text;
- text = undefined;
- } else {
- // for backwards compatibility, in case clients other than Network are creating Popup directly
- style = {
- fontColor: 'black',
- fontSize: 14, // px
- fontFace: 'verdana',
- color: {
- border: '#666',
- background: '#FFFFC6'
- }
+ while (token == '[') {
+ getToken();
+ attr = {};
+ while (token !== '' && token != ']') {
+ if (tokenType != TOKENTYPE.IDENTIFIER) {
+ throw newSyntaxError('Attribute name expected');
}
- }
- }
+ var name = token;
- this.x = 0;
- this.y = 0;
- this.padding = 5;
+ getToken();
+ if (token != '=') {
+ throw newSyntaxError('Equal sign = expected');
+ }
+ getToken();
- if (x !== undefined && y !== undefined ) {
- this.setPosition(x, y);
- }
- if (text !== undefined) {
- this.setText(text);
- }
+ if (tokenType != TOKENTYPE.IDENTIFIER) {
+ throw newSyntaxError('Attribute value expected');
+ }
+ var value = token;
+ setValue(attr, name, value); // name can be a path
- // create the frame
- this.frame = document.createElement("div");
- var styleAttr = this.frame.style;
- styleAttr.position = "absolute";
- styleAttr.visibility = "hidden";
- styleAttr.border = "1px solid " + style.color.border;
- styleAttr.color = style.fontColor;
- styleAttr.fontSize = style.fontSize + "px";
- styleAttr.fontFamily = style.fontFace;
- styleAttr.padding = this.padding + "px";
- styleAttr.backgroundColor = style.color.background;
- styleAttr.borderRadius = "3px";
- styleAttr.MozBorderRadius = "3px";
- styleAttr.WebkitBorderRadius = "3px";
- styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
- styleAttr.whiteSpace = "nowrap";
- this.container.appendChild(this.frame);
+ getToken();
+ if (token ==',') {
+ getToken();
+ }
+ }
+
+ if (token != ']') {
+ throw newSyntaxError('Bracket ] expected');
+ }
+ getToken();
+ }
+
+ return attr;
}
/**
- * @param {number} x Horizontal position of the popup window
- * @param {number} y Vertical position of the popup window
+ * Create a syntax error with extra information on current token and index.
+ * @param {String} message
+ * @returns {SyntaxError} err
*/
- Popup.prototype.setPosition = function(x, y) {
- this.x = parseInt(x);
- this.y = parseInt(y);
- };
+ function newSyntaxError(message) {
+ return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
+ }
/**
- * Set the content for the popup window. This can be HTML code or text.
- * @param {string | Element} content
+ * Chop off text after a maximum length
+ * @param {String} text
+ * @param {Number} maxLength
+ * @returns {String}
*/
- Popup.prototype.setText = function(content) {
- if (content instanceof Element) {
- this.frame.innerHTML = '';
- this.frame.appendChild(content);
+ function chop (text, maxLength) {
+ return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
+ }
+
+ /**
+ * Execute a function fn for each pair of elements in two arrays
+ * @param {Array | *} array1
+ * @param {Array | *} array2
+ * @param {function} fn
+ */
+ function forEach2(array1, array2, fn) {
+ if (Array.isArray(array1)) {
+ array1.forEach(function (elem1) {
+ if (Array.isArray(array2)) {
+ array2.forEach(function (elem2) {
+ fn(elem1, elem2);
+ });
+ }
+ else {
+ fn(elem1, array2);
+ }
+ });
}
else {
- this.frame.innerHTML = content; // string containing text or HTML
+ if (Array.isArray(array2)) {
+ array2.forEach(function (elem2) {
+ fn(array1, elem2);
+ });
+ }
+ else {
+ fn(array1, array2);
+ }
}
- };
+ }
/**
- * Show the popup window
- * @param {boolean} show Optional. Show or hide the window
+ * Convert a string containing a graph in DOT language into a map containing
+ * with nodes and edges in the format of graph.
+ * @param {String} data Text containing a graph in DOT-notation
+ * @return {Object} graphData
*/
- Popup.prototype.show = function (show) {
- if (show === undefined) {
- show = true;
- }
+ function DOTToGraph (data) {
+ // parse the DOT file
+ var dotData = parseDOT(data);
+ var graphData = {
+ nodes: [],
+ edges: [],
+ options: {}
+ };
- if (show) {
- var height = this.frame.clientHeight;
- var width = this.frame.clientWidth;
- var maxHeight = this.frame.parentNode.clientHeight;
- var maxWidth = this.frame.parentNode.clientWidth;
+ // copy the nodes
+ if (dotData.nodes) {
+ dotData.nodes.forEach(function (dotNode) {
+ var graphNode = {
+ id: dotNode.id,
+ label: String(dotNode.label || dotNode.id)
+ };
+ merge(graphNode, dotNode.attr);
+ if (graphNode.image) {
+ graphNode.shape = 'image';
+ }
+ graphData.nodes.push(graphNode);
+ });
+ }
- var top = (this.y - height);
- if (top + height + this.padding > maxHeight) {
- top = maxHeight - height - this.padding;
- }
- if (top < this.padding) {
- top = this.padding;
+ // copy the edges
+ if (dotData.edges) {
+ /**
+ * Convert an edge in DOT format to an edge with VisGraph format
+ * @param {Object} dotEdge
+ * @returns {Object} graphEdge
+ */
+ var convertEdge = function (dotEdge) {
+ var graphEdge = {
+ from: dotEdge.from,
+ to: dotEdge.to
+ };
+ merge(graphEdge, dotEdge.attr);
+ graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
+ return graphEdge;
}
- var left = this.x;
- if (left + width + this.padding > maxWidth) {
- left = maxWidth - width - this.padding;
- }
- if (left < this.padding) {
- left = this.padding;
+ dotData.edges.forEach(function (dotEdge) {
+ var from, to;
+ if (dotEdge.from instanceof Object) {
+ from = dotEdge.from.nodes;
+ }
+ else {
+ from = {
+ id: dotEdge.from
+ }
+ }
+
+ if (dotEdge.to instanceof Object) {
+ to = dotEdge.to.nodes;
+ }
+ else {
+ to = {
+ id: dotEdge.to
+ }
+ }
+
+ if (dotEdge.from instanceof Object && dotEdge.from.edges) {
+ dotEdge.from.edges.forEach(function (subEdge) {
+ var graphEdge = convertEdge(subEdge);
+ graphData.edges.push(graphEdge);
+ });
+ }
+
+ forEach2(from, to, function (from, to) {
+ var subEdge = createEdge(graphData, from.id, to.id, dotEdge.type, dotEdge.attr);
+ var graphEdge = convertEdge(subEdge);
+ graphData.edges.push(graphEdge);
+ });
+
+ if (dotEdge.to instanceof Object && dotEdge.to.edges) {
+ dotEdge.to.edges.forEach(function (subEdge) {
+ var graphEdge = convertEdge(subEdge);
+ graphData.edges.push(graphEdge);
+ });
+ }
+ });
+ }
+
+ // copy the options
+ if (dotData.attr) {
+ graphData.options = dotData.attr;
+ }
+
+ return graphData;
+ }
+
+ // exports
+ exports.parseDOT = parseDOT;
+ exports.DOTToGraph = DOTToGraph;
+
+
+/***/ },
+/* 58 */
+/***/ function(module, exports, __webpack_require__) {
+
+
+ function parseGephi(gephiJSON, options) {
+ var edges = [];
+ var nodes = [];
+ this.options = {
+ edges: {
+ inheritColor: true
+ },
+ nodes: {
+ allowedToMove: false,
+ parseColor: false
}
+ };
- this.frame.style.left = left + "px";
- this.frame.style.top = top + "px";
- this.frame.style.visibility = "visible";
+ if (options !== undefined) {
+ this.options.nodes['allowedToMove'] = options.allowedToMove | false;
+ this.options.nodes['parseColor'] = options.parseColor | false;
+ this.options.edges['inheritColor'] = options.inheritColor | true;
}
- else {
- this.hide();
+
+ var gEdges = gephiJSON.edges;
+ var gNodes = gephiJSON.nodes;
+ for (var i = 0; i < gEdges.length; i++) {
+ var edge = {};
+ var gEdge = gEdges[i];
+ edge['id'] = gEdge.id;
+ edge['from'] = gEdge.source;
+ edge['to'] = gEdge.target;
+ edge['attributes'] = gEdge.attributes;
+ // edge['value'] = gEdge.attributes !== undefined ? gEdge.attributes.Weight : undefined;
+ // edge['width'] = edge['value'] !== undefined ? undefined : edgegEdge.size;
+ edge['color'] = gEdge.color;
+ edge['inheritColor'] = edge['color'] !== undefined ? false : this.options.inheritColor;
+ edges.push(edge);
}
- };
- /**
- * Hide the popup window
- */
- Popup.prototype.hide = function () {
- this.frame.style.visibility = "hidden";
- };
+ for (var i = 0; i < gNodes.length; i++) {
+ var node = {};
+ var gNode = gNodes[i];
+ node['id'] = gNode.id;
+ node['attributes'] = gNode.attributes;
+ node['x'] = gNode.x;
+ node['y'] = gNode.y;
+ node['label'] = gNode.label;
+ if (this.options.nodes.parseColor == true) {
+ node['color'] = gNode.color;
+ }
+ else {
+ node['color'] = gNode.color !== undefined ? {background:gNode.color, border:gNode.color} : undefined;
+ }
+ node['radius'] = gNode.size;
+ node['allowedToMoveX'] = this.options.nodes.allowedToMove;
+ node['allowedToMoveY'] = this.options.nodes.allowedToMove;
+ nodes.push(node);
+ }
- module.exports = Popup;
+ return {nodes:nodes, edges:edges};
+ }
+ exports.parseGephi = parseGephi;
/***/ },
/* 59 */
@@ -31310,7 +31314,7 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ function(module, exports, __webpack_require__) {
var util = __webpack_require__(1);
- var Node = __webpack_require__(56);
+ var Node = __webpack_require__(53);
/**
* Creation of the SectorMixin var.
@@ -31868,7 +31872,7 @@ return /******/ (function(modules) { // webpackBootstrap
/* 66 */
/***/ function(module, exports, __webpack_require__) {
- var Node = __webpack_require__(56);
+ var Node = __webpack_require__(53);
/**
* This function can be called from the _doInAllSectors function
@@ -32583,8 +32587,8 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ function(module, exports, __webpack_require__) {
var util = __webpack_require__(1);
- var Node = __webpack_require__(56);
- var Edge = __webpack_require__(57);
+ var Node = __webpack_require__(53);
+ var Edge = __webpack_require__(52);
/**
* clears the toolbar div element of children
diff --git a/lib/network/Images.js b/lib/network/Images.js
index 7d46eea5..0a4ff046 100644
--- a/lib/network/Images.js
+++ b/lib/network/Images.js
@@ -4,7 +4,6 @@
*/
function Images() {
this.images = {};
-
this.callback = undefined;
}
@@ -24,25 +23,30 @@ Images.prototype.setOnloadCallback = function(callback) {
* @return {Image} img The image object
*/
Images.prototype.load = function(url, brokenUrl) {
- var img = this.images[url];
- if (img == undefined) {
+ if (this.images[url] == undefined) {
// create the image
- var images = this;
- img = new Image();
- this.images[url] = img;
- img.onload = function() {
- if (images.callback) {
- images.callback(this);
+ var me = this;
+ var img = new Image();
+ img.onload = function () {
+ if (me.callback) {
+ me.images[url] = img;
+ me.callback(this);
}
};
-
+
img.onerror = function () {
- this.src = brokenUrl;
- if (images.callback) {
- images.callback(this);
- }
- };
-
+ if (brokenUrl === undefined) {
+ console.error("Could not load image:", url);
+ delete this.src;
+ if (me.callback) {
+ me.callback(this);
+ }
+ }
+ else {
+ this.src = brokenUrl;
+ }
+ };
+
img.src = url;
}
diff --git a/lib/network/Network.js b/lib/network/Network.js
index 5f4b1f9c..c6fdb8e4 100644
--- a/lib/network/Network.js
+++ b/lib/network/Network.js
@@ -236,7 +236,7 @@ function Network (container, data, options) {
var network = this;
this.groups = new Groups(); // object with groups
this.images = new Images(); // object with images
- this.images.setOnloadCallback(function () {
+ this.images.setOnloadCallback(function (status) {
network._redraw();
});
@@ -350,16 +350,19 @@ function Network (container, data, options) {
// Extend Network with an Emitter mixin
Emitter(Network.prototype);
-
+/**
+ * Determine if the browser requires a setTimeout or a requestAnimationFrame. This was required because
+ * some implementations (safari and IE9) did not support requestAnimationFrame
+ * @private
+ */
Network.prototype._determineBrowserMethod = function() {
- var ua = navigator.userAgent.toLowerCase();
-
+ var browserType = navigator.userAgent.toLowerCase();
this.requiresTimeout = false;
- if (ua.indexOf('msie 9.0') != -1) { // IE 9
+ if (browserType.indexOf('msie 9.0') != -1) { // IE 9
this.requiresTimeout = true;
}
- else if (ua.indexOf('safari') != -1) { // safari
- if (ua.indexOf('chrome') <= -1) {
+ else if (browserType.indexOf('safari') != -1) { // safari
+ if (browserType.indexOf('chrome') <= -1) {
this.requiresTimeout = true;
}
}
diff --git a/lib/network/Node.js b/lib/network/Node.js
index d228395d..13524f41 100644
--- a/lib/network/Node.js
+++ b/lib/network/Node.js
@@ -211,8 +211,6 @@ Node.prototype.setProperties = function(properties, constants) {
this.options.radiusMax = constants.nodes.widthMax;
}
-
-
// choose draw method depending on the shape
switch (this.options.shape) {
case 'database': this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
@@ -539,7 +537,6 @@ Node.prototype._resizeImage = function (ctx) {
Node.prototype._drawImage = function (ctx) {
this._resizeImage(ctx);
-
this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2;