Browse Source

not working yet

css_transitions
Alex de Mulder 10 years ago
parent
commit
6dd02d5a4d
10 changed files with 6335 additions and 3847 deletions
  1. +7
    -0
      Jakefile.js
  2. +115
    -34
      dist/vis.css
  3. +4963
    -3532
      dist/vis.js
  4. +1
    -1
      dist/vis.min.css
  5. +12
    -11
      dist/vis.min.js
  6. +32
    -0
      examples/Graph2d/01_basic.html
  7. +2
    -1
      src/module/exports.js
  8. +659
    -0
      src/timeline/Graph2d.js
  9. +204
    -268
      src/timeline/component/Linegraph.js
  10. +340
    -0
      src/timeline/component/Linegraph2.js

+ 7
- 0
Jakefile.js View File

@ -45,6 +45,8 @@ task('build', {async: true}, function () {
'./src/timeline/component/css/currenttime.css', './src/timeline/component/css/currenttime.css',
'./src/timeline/component/css/customtime.css', './src/timeline/component/css/customtime.css',
'./src/timeline/component/css/dataaxis.css',
'./src/graph/css/graph-manipulation.css', './src/graph/css/graph-manipulation.css',
'./src/graph/css/graph-navigation.css' './src/graph/css/graph-navigation.css'
], ],
@ -64,6 +66,10 @@ task('build', {async: true}, function () {
'./src/DataSet.js', './src/DataSet.js',
'./src/DataView.js', './src/DataView.js',
'./src/timeline/component/DataAxis.js',
'./src/timeline/component/Linegraph.js',
'./src/timeline/DataStep.js',
'./src/timeline/stack.js', './src/timeline/stack.js',
'./src/timeline/TimeStep.js', './src/timeline/TimeStep.js',
'./src/timeline/Range.js', './src/timeline/Range.js',
@ -75,6 +81,7 @@ task('build', {async: true}, function () {
'./src/timeline/component/item/*.js', './src/timeline/component/item/*.js',
'./src/timeline/component/Group.js', './src/timeline/component/Group.js',
'./src/timeline/Timeline.js', './src/timeline/Timeline.js',
'./src/timeline/Graph2d.js',
'./src/graph/dotparser.js', './src/graph/dotparser.js',
'./src/graph/shapes.js', './src/graph/shapes.js',

+ 115
- 34
dist/vis.css View File

@ -2,32 +2,55 @@
} }
.vis.timeline.rootpanel {
.vis.timeline.root {
position: relative; position: relative;
border: 1px solid #bfbfbf;
overflow: hidden; overflow: hidden;
padding: 0;
margin: 0;
border: 1px solid #bfbfbf;
box-sizing: border-box; box-sizing: border-box;
/* FIXME: there is an issue with the height of the items when panel height is animated
-webkit-transition: height 4s ease-in-out;
transition: height 4s ease-in-out;
/**/
} }
.vis.timeline .vpanel {
.vis.timeline .vispanel {
position: absolute; position: absolute;
overflow: hidden;
padding: 0;
margin: 0;
box-sizing: border-box; box-sizing: border-box;
} }
.vis.timeline .vpanel.side {
border-right: 1px solid #bfbfbf;
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right,
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom {
border: 1px #bfbfbf;
}
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right {
border-top-style: solid;
border-bottom-style: solid;
overflow: hidden;
} }
.vis.timeline .vpanel.side.hidden {
display: none;
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom {
border-left-style: solid;
border-right-style: solid;
}
.vis.timeline .background {
overflow: hidden;
}
.vis.timeline .vispanel > .content {
position: relative;
} }
@ -50,14 +73,12 @@
box-sizing: border-box; box-sizing: border-box;
} }
.vis.timeline.top .labelset .vlabel {
border-top: 1px solid #bfbfbf;
border-bottom: none;
.vis.timeline .labelset .vlabel {
border-bottom: 1px solid #bfbfbf;
} }
.vis.timeline.bottom .labelset .vlabel {
border-top: none;
border-bottom: 1px solid #bfbfbf;
.vis.timeline .labelset .vlabel:last-child {
border-bottom: none;
} }
.vis.timeline .labelset .vlabel .inner { .vis.timeline .labelset .vlabel .inner {
@ -65,6 +86,10 @@
padding: 5px; padding: 5px;
} }
.vis.timeline .labelset .vlabel .inner.hidden {
padding: 0;
}
.vis.timeline .itemset { .vis.timeline .itemset {
position: relative; position: relative;
@ -79,21 +104,36 @@
/**/ /**/
} }
.vis.timeline .background {
.vis.timeline .itemset .background,
.vis.timeline .itemset .foreground {
position: absolute;
width: 100%;
height: 100%;
} }
.vis.timeline .foreground {
.vis.timeline .itemset.foreground {
overflow: hidden;
} }
.vis.timeline .axis { .vis.timeline .axis {
overflow: visible;
position: absolute;
width: 100%;
height: 0;
left: 1px;
z-index: 1;
} }
.vis.timeline .group { .vis.timeline .group {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .group:last-child {
border-bottom: none;
} }
/*
.vis.timeline.top .group { .vis.timeline.top .group {
border-top: 1px solid #bfbfbf; border-top: 1px solid #bfbfbf;
border-bottom: none; border-bottom: none;
@ -103,7 +143,7 @@
border-top: none; border-top: none;
border-bottom: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf;
} }
*/
.vis.timeline .item { .vis.timeline .item {
position: absolute; position: absolute;
@ -126,7 +166,7 @@
z-index: 999; z-index: 999;
} }
.vis.timeline.editable .item.selected {
.vis.timeline .editable .item.selected {
cursor: move; cursor: move;
} }
@ -223,7 +263,22 @@
} }
.vis.timeline .timeaxis { .vis.timeline .timeaxis {
position: relative;
overflow: hidden;
}
.vis.timeline .timeaxis.foreground {
top: 0;
left: 0;
width: 100%;
}
.vis.timeline .timeaxis.background {
position: absolute; position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} }
.vis.timeline .timeaxis .text { .vis.timeline .timeaxis .text {
@ -248,14 +303,6 @@
border-right: 1px solid; border-right: 1px solid;
} }
.vis.timeline .timeaxis .grid.horizontal {
position: absolute;
left: 0;
width: 100%;
height: 0;
border-bottom: 1px solid;
}
.vis.timeline .timeaxis .grid.minor { .vis.timeline .timeaxis .grid.minor {
border-color: #e5e5e5; border-color: #e5e5e5;
} }
@ -267,13 +314,47 @@
.vis.timeline .currenttime { .vis.timeline .currenttime {
background-color: #FF7F6E; background-color: #FF7F6E;
width: 2px; width: 2px;
z-index: 9;
z-index: 1;
} }
.vis.timeline .customtime { .vis.timeline .customtime {
background-color: #6E94FF; background-color: #6E94FF;
width: 2px; width: 2px;
cursor: move; cursor: move;
z-index: 9;
z-index: 1;
}
.vis.timeline .dataaxis .grid.horizontal {
position: absolute;
left: 0;
width: 100%;
height: 0;
border-bottom: 1px solid;
}
.vis.timeline .dataaxis .grid.minor {
border-color: #e5e5e5;
}
.vis.timeline .dataaxis .grid.major {
border-color: #bfbfbf;
}
.vis.timeline .dataaxis .yAxis.major {
font-size:12px;
width: 100%;
position: absolute;
color: #4d4d4d;
white-space: nowrap;
}
.vis.timeline .dataaxis .yAxis.minor{
font-size:9px;
position: absolute;
width: 100%;
color: #4d4d4d;
white-space: nowrap;
} }
div.graph-manipulationDiv { div.graph-manipulationDiv {
border-width:0px; border-width:0px;

+ 4963
- 3532
dist/vis.js
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File


+ 12
- 11
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 32
- 0
examples/Graph2d/01_basic.html View File

@ -0,0 +1,32 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | Basic demo</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{id: 1, content: 'item 1', x: '2014-04-01', y: 10},
{id: 2, content: 'item 2', x: '2014-04-02', y: 20},
{id: 3, content: 'item 3', x: '2014-04-03', y: 30},
{id: 4, content: 'item 4', x: '2014-04-04', y: 10},
{id: 5, content: 'item 5', x: '2014-04-05', y: 20},
{id: 6, content: 'item 6', x: '2014-04-06', y: 30}
];
var options = {};
var graph2d = new vis.Graph2d(container, items, options);
</script>
</body>
</html>

+ 2
- 1
src/module/exports.js View File

@ -34,7 +34,8 @@ var vis = {
Timeline: Timeline, Timeline: Timeline,
Graph: Graph, Graph: Graph,
Graph3d: Graph3d
Graph3d: Graph3d,
Graph2d: Graph2d
}; };
/** /**

+ 659
- 0
src/timeline/Graph2d.js View File

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

+ 204
- 268
src/timeline/component/Linegraph.js View File

@ -1,117 +1,114 @@
/**
* Created by Alex on 5/6/14.
*/
var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
/** /**
* An ItemSet holds a set of items and ranges which can be displayed in a * An ItemSet holds a set of items and ranges which can be displayed in a
* range. The width is determined by the parent of the ItemSet, and the height * range. The width is determined by the parent of the ItemSet, and the height
* is determined by the size of the items. * is determined by the size of the items.
* @param {Panel} backgroundPanel Panel which can be used to display the
* vertical lines of box items.
* @param {Panel} axisPanel Panel on the axis where the dots of box-items
* can be displayed.
* @param {Panel} sidePanel Left side panel holding labels
* @param {Object} [options] See ItemSet.setOptions for the available options.
* @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} body
* @param {Object} [options] See Linegraph.setOptions for the available options.
* @constructor ItemSet * @constructor ItemSet
* @extends Panel
* @extends Component
*/ */
function Linegraph(backgroundPanel, axisPanel, sidePanel, options, timeline, sidePanelParent) {
this.id = util.randomUUID();
this.timeline = timeline;
// one options object is shared by this itemset and all its items
this.options = options || {};
this.backgroundPanel = backgroundPanel;
this.axisPanel = axisPanel;
this.sidePanel = sidePanel;
this.sidePanelParent = sidePanelParent;
this.itemOptions = Object.create(this.options);
function Linegraph(body, options) {
this.body = body;
this.defaultOptions = {
type: 'box',
orientation: 'bottom', // 'top' or 'bottom'
align: 'center', // alignment of box items
stack: true,
groupOrder: null,
selectable: true,
editable: {
updateTime: false,
updateGroup: false,
add: false,
remove: false
},
onAdd: function (item, callback) {
callback(item);
},
onUpdate: function (item, callback) {
callback(item);
},
onMove: function (item, callback) {
callback(item);
},
onRemove: function (item, callback) {
callback(item);
},
margin: {
item: 10,
axis: 20
},
padding: 5
};
// options is shared by this ItemSet and all its items
this.options = util.extend({}, this.defaultOptions);
this.conversion = {
toScreen: body.util.toScreen,
toTime: body.util.toTime
};
this.dom = {}; this.dom = {};
this.props = {};
this.hammer = null; this.hammer = null;
var me = this;
this.itemsData = null; // DataSet this.itemsData = null; // DataSet
this.groupsData = null; // DataSet this.groupsData = null; // DataSet
this.range = null; // Range or Object {start: number, end: number}
// listeners for the DataSet of the items
// this.itemListeners = {
// 'add': function(event, params, senderId) {
// if (senderId != me.id) me._onAdd(params.items);
// },
// 'update': function(event, params, senderId) {
// if (senderId != me.id) me._onUpdate(params.items);
// },
// 'remove': function(event, params, senderId) {
// if (senderId != me.id) me._onRemove(params.items);
// }
// };
//
// // listeners for the DataSet of the groups
// this.groupListeners = {
// 'add': function(event, params, senderId) {
// if (senderId != me.id) me._onAddGroups(params.items);
// },
// 'update': function(event, params, senderId) {
// if (senderId != me.id) me._onUpdateGroups(params.items);
// },
// 'remove': function(event, params, senderId) {
// if (senderId != me.id) me._onRemoveGroups(params.items);
// }
// };
this.items = {}; // object with an Item for every data item
this.groups = {}; // Group object for every group
this.groupIds = [];
// 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);
}
};
this.items = {}; // object with an Item for every data item
this.selection = []; // list with the ids of all selected nodes this.selection = []; // list with the ids of all selected nodes
this.stackDirty = true; // if true, all items will be restacked on next repaint
this.touchParams = {}; // stores properties while dragging this.touchParams = {}; // stores properties while dragging
// create the HTML DOM // create the HTML DOM
this.lastStart = 0;
this._create(); this._create();
var me = this;
this.timeline.on("rangechange", function() {
if (me.lastStart != 0) {
var offset = me.range.start - me.lastStart;
var range = me.range.end - me.range.start;
if (me.width != 0) {
var rangePerPixelInv = me.width/range;
var xOffset = offset * rangePerPixelInv;
me.svg.style.left = util.option.asSize(-me.width - xOffset);
}
}
})
this.timeline.on("rangechanged", function() {
me.lastStart = me.range.start;
me.svg.style.left = util.option.asSize(-me.width);
me.setData.apply(me);
});
// this.data = new DataView(this.items)
this.setOptions(options);
} }
Linegraph.prototype = new Panel();
Linegraph.prototype = new Component();
// available item types will be registered here
Linegraph.types = {
box: ItemBox,
range: ItemRange,
rangeoverflow: ItemRangeOverflow,
point: ItemPoint
};
/** /**
* Create the HTML DOM for the ItemSet * Create the HTML DOM for the ItemSet
*/ */
Linegraph.prototype._create = function(){ Linegraph.prototype._create = function(){
var frame = document.createElement('div'); var frame = document.createElement('div');
frame['timeline-linegraph'] = this;
this.frame = frame;
this.frame.className = 'itemset';
frame.className = 'linegraph';
frame['linegraph'] = this;
this.dom.frame = frame;
// create background panel // create background panel
var background = document.createElement('div'); var background = document.createElement('div');
background.className = 'background'; background.className = 'background';
this.backgroundPanel.frame.appendChild(background);
frame.appendChild(background);
this.dom.background = background; this.dom.background = background;
// create foreground panel // create foreground panel
@ -120,59 +117,6 @@ Linegraph.prototype._create = function(){
frame.appendChild(foreground); frame.appendChild(foreground);
this.dom.foreground = foreground; this.dom.foreground = foreground;
// // create axis panel
// var axis = document.createElement('div');
// axis.className = 'axis';
// this.dom.axis = axis;
// this.axisPanel.frame.appendChild(axis);
//
// // create labelset
// var labelSet = document.createElement('div');
// labelSet.className = 'labelset';
// this.dom.labelSet = labelSet;
// this.sidePanel.frame.appendChild(labelSet);
this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
this.svg.style.position = "relative"
this.svg.style.height = "300px";
this.svg.style.display = "block";
this.path = document.createElementNS('http://www.w3.org/2000/svg',"path");
this.path.setAttributeNS(null, "fill","none");
this.path.setAttributeNS(null, "stroke","blue");
this.path.setAttributeNS(null, "stroke-width","1");
this.path2 = document.createElementNS('http://www.w3.org/2000/svg',"path");
this.path2.setAttributeNS(null, "fill","none");
this.path2.setAttributeNS(null, "stroke","red");
this.path2.setAttributeNS(null, "stroke-width","1");
this.path3 = document.createElementNS('http://www.w3.org/2000/svg',"path");
this.path3.setAttributeNS(null, "fill","none");
this.path3.setAttributeNS(null, "stroke","green");
this.path3.setAttributeNS(null, "stroke-width","1");
this.dom.foreground.appendChild(this.svg);
this.svg.appendChild(this.path3);
this.svg.appendChild(this.path2);
this.svg.appendChild(this.path);
// this.yAxisDiv = document.createElement('div');
// this.yAxisDiv.style.backgroundColor = 'rgb(220,220,220)';
// this.yAxisDiv.style.width = '100px';
// this.yAxisDiv.style.height = this.svg.style.height;
this._createAxis();
// this.dom.yAxisDiv = this.yAxisDiv;
// this.sidePanel.frame.appendChild(this.yAxisDiv);
this.sidePanel.showPanel.apply(this.sidePanel);
this.sidePanelParent.showPanel();
};
Linegraph.prototype._createAxis = function() {
// panel with time axis // panel with time axis
var dataAxisOptions = { var dataAxisOptions = {
range: this.range, range: this.range,
@ -183,11 +127,130 @@ Linegraph.prototype._createAxis = function() {
svg: this.svg svg: this.svg
}; };
this.yAxis = new DataAxis(dataAxisOptions); this.yAxis = new DataAxis(dataAxisOptions);
this.sidePanel.frame.appendChild(this.yAxis.getFrame());
this.dom.axis = this.yAxis.getFrame();
}
Linegraph.prototype.setData = function() {
this.show();
};
Linegraph.prototype.setOptions = function(options) {
if (options) {
// copy all options that we know
var fields = ['type', 'align', 'orientation', 'padding', 'stack', 'selectable', 'groupOrder'];
util.selectiveExtend(fields, this.options, options);
if ('margin' in options) {
if (typeof options.margin === 'number') {
this.options.margin.axis = options.margin;
this.options.margin.item = options.margin;
}
else if (typeof options.margin === 'object'){
util.selectiveExtend(['axis', 'item'], this.options.margin, options.margin);
}
}
if ('editable' in options) {
if (typeof options.editable === 'boolean') {
this.options.editable.updateTime = options.editable;
this.options.editable.updateGroup = options.editable;
this.options.editable.add = options.editable;
this.options.editable.remove = options.editable;
}
else if (typeof options.editable === 'object') {
util.selectiveExtend(['updateTime', 'updateGroup', 'add', 'remove'], this.options.editable, options.editable);
}
}
// callback functions
var addCallback = (function (name) {
if (name in options) {
var fn = options[name];
if (!(fn instanceof Function) || fn.length != 2) {
throw new Error('option ' + name + ' must be a function ' + name + '(item, callback)');
}
this.options[name] = fn;
}
}).bind(this);
['onAdd', 'onUpdate', 'onRemove', 'onMove'].forEach(addCallback);
// force the itemSet to refresh: options like orientation and margins may be changed
}
};
/**
* 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);
}
// remove the labelset containing all group labels
if (this.dom.axis.parentNode) {
this.dom.axis.parentNode.removeChild(this.dom.axis);
}
};
/**
* Show the component in the DOM (when not already visible).
* @return {Boolean} changed
*/
Linegraph.prototype.show = function() {
// show frame containing the items
if (!this.dom.frame.parentNode) {
this.body.dom.center.appendChild(this.dom.frame);
}
// show labelset containing labels
if (!this.dom.axis.parentNode) {
this.body.dom.left.appendChild(this.dom.axis);
}
};
/**
* Repaint the component
* @return {boolean} Returns true if the component is resized
*/
Linegraph.prototype.redraw = function() {
// check whether zoomed (in that case we need to re-stack everything)
var visibleInterval = this.range.end - this.range.start;
var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.width != this.lastWidth);
if (zoomed) this.stackDirty = true;
this.lastVisibleInterval = visibleInterval;
this.lastWidth = this.width;
// calculate actual size and position
this.width = this.frame.offsetWidth;
// check if this component is resized
resized = this._isResized();
if (resized) {
this.svg.style.width = asSize(3*this.width);
this.svg.style.left = asSize(-this.width);
}
if (zoomed) {
this.updateGraph();
}
};
/**
* Get the first group, aligned with the axis
* @return {Group | null} firstGroup
* @private
*/
Linegraph.prototype._firstGroup = function() {
var firstGroupIndex = (this.options.orientation == 'top') ? 0 : (this.groupIds.length - 1);
var firstGroupId = this.groupIds[firstGroupIndex];
var firstGroup = this.groups[firstGroupId] || this.groups[UNGROUPED];
return firstGroup || null;
};
Linegraph.prototype.updateGraph = function() {
if (this.width != 0) { if (this.width != 0) {
var dataview = new DataView(this.timeline.itemsData, var dataview = new DataView(this.timeline.itemsData,
{filter: function (item) {return (item.value);}}) {filter: function (item) {return (item.value);}})
@ -241,67 +304,13 @@ Linegraph.prototype.setData = function() {
} }
/** /**
* Set options for the Linegraph. Existing options will be extended/overwritten.
* @param {Object} [options] The following options are available:
* {String | function} [className]
* class name for the itemset
* {String} [type]
* Default type for the items. Choose from 'box'
* (default), 'point', or 'range'. The default
* Style can be overwritten by individual items.
* {String} align
* Alignment for the items, only applicable for
* ItemBox. Choose 'center' (default), 'left', or
* 'right'.
* {String} orientation
* Orientation of the item set. Choose 'top' or
* 'bottom' (default).
* {Number} margin.axis
* Margin between the axis and the items in pixels.
* Default is 20.
* {Number} margin.item
* Margin between items in pixels. Default is 10.
* {Number} padding
* Padding of the contents of an item in pixels.
* Must correspond with the items css. Default is 5.
* {Function} snap
* Function to let items snap to nice dates when
* dragging items.
* Set items
* @param {vis.DataSet | null} items
*/ */
Linegraph.prototype.setOptions = function(options) {
Component.prototype.setOptions.call(this, options);
};
Linegraph.prototype._extractData = function(dataset) {
var extractedData = [];
var low = dataset[0].value;
var high = dataset[0].value;
var range = this.range.end - this.range.start;
var rangePerPixel = range/this.width;
var rangePerPixelInv = this.width/range;
var xOffset = -this.range.start + this.width*rangePerPixel;
for (var i = 0; i < dataset.length; i++) {
var val = new Date(dataset[i].start).getTime();
val += xOffset;
val *= rangePerPixelInv;
Linegraph.prototype.setItems = function(items) {
extractedData.push({x:val, y:dataset[i].value});
if (low > dataset[i].value) {
low = dataset[i].value;
}
if (high < dataset[i].value) {
high = dataset[i].value;
}
}
};
//extractedData.sort(function (a,b) {return a.x - b.x;})
return {range:{low:low,high:high},data:extractedData};
}
Linegraph.prototype._catmullRomUniform = function(data) { Linegraph.prototype._catmullRomUniform = function(data) {
// catmull rom // catmull rom
@ -391,10 +400,10 @@ Linegraph.prototype._catmullRom = function(data, alpha) {
if (M > 0) {M = 1 / M;} if (M > 0) {M = 1 / M;}
bp1 = { x: ((-d2pow2A * p0.x + A*p1.x + d1pow2A * p2.x) * N), bp1 = { x: ((-d2pow2A * p0.x + A*p1.x + d1pow2A * p2.x) * N),
y: ((-d2pow2A * p0.y + A*p1.y + d1pow2A * p2.y) * N)};
y: ((-d2pow2A * p0.y + A*p1.y + d1pow2A * p2.y) * N)};
bp2 = { x: (( d3pow2A * p1.x + B*p2.x - d2pow2A * p3.x) * M), bp2 = { x: (( d3pow2A * p1.x + B*p2.x - d2pow2A * p3.x) * M),
y: (( d3pow2A * p1.y + B*p2.y - d2pow2A * p3.y) * M)};
y: (( d3pow2A * p1.y + B*p2.y - d2pow2A * p3.y) * M)};
if (bp1.x == 0 && bp1.y == 0) {bp1 = p1;} if (bp1.x == 0 && bp1.y == 0) {bp1 = p1;}
if (bp2.x == 0 && bp2.y == 0) {bp2 = p2;} if (bp2.x == 0 && bp2.y == 0) {bp2 = p2;}
@ -425,76 +434,3 @@ Linegraph.prototype._linear = function(data) {
} }
return d; return d;
} }
/**
* Set range (start and end).
* @param {Range | Object} range A Range or an object containing start and end.
*/
Linegraph.prototype.setRange = function(range) {
if (!(range instanceof Range) && (!range || !range.start || !range.end)) {
throw new TypeError('Range must be an instance of Range, ' +
'or an object containing start and end.');
}
this.range = range;
};
Linegraph.prototype.repaint = function() {
var margin = this.options.margin,
range = this.range,
asSize = util.option.asSize,
asString = util.option.asString,
options = this.options,
orientation = this.getOption('orientation'),
resized = false,
frame = this.frame;
// TODO: document this feature to specify one margin for both item and axis distance
if (typeof margin === 'number') {
margin = {
item: margin,
axis: margin
};
}
// update className
this.frame.className = 'itemset' + (options.className ? (' ' + asString(options.className)) : '');
// check whether zoomed (in that case we need to re-stack everything)
// TODO: would be nicer to get this as a trigger from Range
var visibleInterval = this.range.end - this.range.start;
var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.width != this.lastWidth);
if (zoomed) this.stackDirty = true;
this.lastVisibleInterval = visibleInterval;
this.lastWidth = this.width;
// reposition frame
this.frame.style.left = asSize(options.left, '');
this.frame.style.right = asSize(options.right, '');
this.frame.style.top = asSize((orientation == 'top') ? '0' : '');
this.frame.style.bottom = asSize((orientation == 'top') ? '' : '0');
this.frame.style.width = asSize(options.width, '100%');
// frame.style.height = asSize(height);
//frame.style.height = asSize('height' in options ? options.height : height); // TODO: reckon with height
// calculate actual size and position
this.top = this.frame.offsetTop;
this.left = this.frame.offsetLeft;
this.width = this.frame.offsetWidth;
// this.height = height;
// check if this component is resized
resized = this._isResized() || resized;
if (resized) {
this.svg.style.width = asSize(3*this.width);
this.svg.style.left = asSize(-this.width);
}
if (zoomed) {
this.setData();
}
}

+ 340
- 0
src/timeline/component/Linegraph2.js View File

@ -0,0 +1,340 @@
/**
* Created by Alex on 5/6/14.
*/
var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
/**
* An ItemSet holds a set of items and ranges which can be displayed in a
* range. The width is determined by the parent of the ItemSet, and the height
* is determined by the size of the items.
* @param {Panel} backgroundPanel Panel which can be used to display the
* vertical lines of box items.
* @param {Panel} axisPanel Panel on the axis where the dots of box-items
* can be displayed.
* @param {Panel} sidePanel Left side panel holding labels
* @param {Object} [options] See ItemSet.setOptions for the available options.
* @constructor ItemSet
* @extends Panel
*/
function Linegraph(backgroundPanel, axisPanel, sidePanel, options, timeline, sidePanelParent) {
this.id = util.randomUUID();
this.timeline = timeline;
// one options object is shared by this itemset and all its items
this.options = options || {};
this.backgroundPanel = backgroundPanel;
this.axisPanel = axisPanel;
this.sidePanel = sidePanel;
this.sidePanelParent = sidePanelParent;
this.itemOptions = Object.create(this.options);
this.dom = {};
this.hammer = null;
this.itemsData = null; // DataSet
this.groupsData = null; // DataSet
this.range = null; // Range or Object {start: number, end: number}
// listeners for the DataSet of the items
// this.itemListeners = {
// 'add': function(event, params, senderId) {
// if (senderId != me.id) me._onAdd(params.items);
// },
// 'update': function(event, params, senderId) {
// if (senderId != me.id) me._onUpdate(params.items);
// },
// 'remove': function(event, params, senderId) {
// if (senderId != me.id) me._onRemove(params.items);
// }
// };
//
// // listeners for the DataSet of the groups
// this.groupListeners = {
// 'add': function(event, params, senderId) {
// if (senderId != me.id) me._onAddGroups(params.items);
// },
// 'update': function(event, params, senderId) {
// if (senderId != me.id) me._onUpdateGroups(params.items);
// },
// 'remove': function(event, params, senderId) {
// if (senderId != me.id) me._onRemoveGroups(params.items);
// }
// };
this.items = {}; // object with an Item for every data item
this.groups = {}; // Group object for every group
this.groupIds = [];
this.selection = []; // list with the ids of all selected nodes
this.stackDirty = true; // if true, all items will be restacked on next repaint
this.touchParams = {}; // stores properties while dragging
// create the HTML DOM
this.lastStart = 0;
this._create();
var me = this;
this.timeline.on("rangechange", function() {
if (me.lastStart != 0) {
var offset = me.range.start - me.lastStart;
var range = me.range.end - me.range.start;
if (me.width != 0) {
var rangePerPixelInv = me.width/range;
var xOffset = offset * rangePerPixelInv;
me.svg.style.left = util.option.asSize(-me.width - xOffset);
}
}
})
this.timeline.on("rangechanged", function() {
me.lastStart = me.range.start;
me.svg.style.left = util.option.asSize(-me.width);
me.setData.apply(me);
});
// this.data = new DataView(this.items)
}
//Linegraph.prototype = new Panel();
/**
* Create the HTML DOM for the ItemSet
*/
Linegraph.prototype._create = function(){
var frame = document.createElement('div');
frame['timeline-linegraph'] = this;
this.frame = frame;
this.frame.className = 'itemset';
// create background panel
var background = document.createElement('div');
background.className = 'background';
this.backgroundPanel.frame.appendChild(background);
this.dom.background = background;
// create foreground panel
var foreground = document.createElement('div');
foreground.className = 'foreground';
frame.appendChild(foreground);
this.dom.foreground = foreground;
// // create axis panel
// var axis = document.createElement('div');
// axis.className = 'axis';
// this.dom.axis = axis;
// this.axisPanel.frame.appendChild(axis);
//
// // create labelset
// var labelSet = document.createElement('div');
// labelSet.className = 'labelset';
// this.dom.labelSet = labelSet;
// this.sidePanel.frame.appendChild(labelSet);
// this.yAxisDiv = document.createElement('div');
// this.yAxisDiv.style.backgroundColor = 'rgb(220,220,220)';
// this.yAxisDiv.style.width = '100px';
// this.yAxisDiv.style.height = this.svg.style.height;
this._createAxis();
// this.dom.yAxisDiv = this.yAxisDiv;
// this.sidePanel.frame.appendChild(this.yAxisDiv);
this.sidePanel.showPanel.apply(this.sidePanel);
this.sidePanelParent.showPanel();
};
Linegraph.prototype._createAxis = function() {
}
Linegraph.prototype.setData = function() {
if (this.width != 0) {
var dataview = new DataView(this.timeline.itemsData,
{filter: function (item) {return (item.value);}})
var datapoints = dataview.get();
if (datapoints != null) {
if (datapoints.length > 0) {
var dataset = this._extractData(datapoints);
var data = dataset.data;
console.log("height",data,datapoints, dataset);
this.yAxis.setRange({start:dataset.range.low,end:dataset.range.high});
this.yAxis.repaint();
data = this.yAxis.convertValues(data);
var d, d2, d3;
d = this._catmullRom(data,0.5);
d3 = this._catmullRom(data,0);
d2 = this._catmullRom(data,1);
// var data2 = [];
// this.startTime = this.range.start;
// var min = Date.now() - 3600000 * 24 * 30;
// var max = Date.now() + 3600000 * 24 * 10;
// var count = 60;
// var step = (max-min) / count;
//
// var range = this.range.end - this.range.start;
// var rangePerPixel = range/this.width;
// var rangePerPixelInv = this.width/range;
// var xOffset = -this.range.start + this.width*rangePerPixel;
//
// for (var i = 0; i < count; i++) {
// data2.push({x:(min + i*step + xOffset) * rangePerPixelInv, y: 250*(i%2) + 25})
// }
//
// var d2 = this._catmullRom(data2);
this.path.setAttributeNS(null, "d",d);
this.path2.setAttributeNS(null, "d",d2);
this.path3.setAttributeNS(null, "d",d3);
}
}
}
}
/**
* Set options for the Linegraph. Existing options will be extended/overwritten.
* @param {Object} [options] The following options are available:
* {String | function} [className]
* class name for the itemset
* {String} [type]
* Default type for the items. Choose from 'box'
* (default), 'point', or 'range'. The default
* Style can be overwritten by individual items.
* {String} align
* Alignment for the items, only applicable for
* ItemBox. Choose 'center' (default), 'left', or
* 'right'.
* {String} orientation
* Orientation of the item set. Choose 'top' or
* 'bottom' (default).
* {Number} margin.axis
* Margin between the axis and the items in pixels.
* Default is 20.
* {Number} margin.item
* Margin between items in pixels. Default is 10.
* {Number} padding
* Padding of the contents of an item in pixels.
* Must correspond with the items css. Default is 5.
* {Function} snap
* Function to let items snap to nice dates when
* dragging items.
*/
Linegraph.prototype.setOptions = function(options) {
Component.prototype.setOptions.call(this, options);
};
Linegraph.prototype._extractData = function(dataset) {
var extractedData = [];
var low = dataset[0].value;
var high = dataset[0].value;
var range = this.range.end - this.range.start;
var rangePerPixel = range/this.width;
var rangePerPixelInv = this.width/range;
var xOffset = -this.range.start + this.width*rangePerPixel;
for (var i = 0; i < dataset.length; i++) {
var val = new Date(dataset[i].start).getTime();
val += xOffset;
val *= rangePerPixelInv;
extractedData.push({x:val, y:dataset[i].value});
if (low > dataset[i].value) {
low = dataset[i].value;
}
if (high < dataset[i].value) {
high = dataset[i].value;
}
}
//extractedData.sort(function (a,b) {return a.x - b.x;})
return {range:{low:low,high:high},data:extractedData};
}
/**
* Set range (start and end).
* @param {Range | Object} range A Range or an object containing start and end.
*/
Linegraph.prototype.setRange = function(range) {
if (!(range instanceof Range) && (!range || !range.start || !range.end)) {
throw new TypeError('Range must be an instance of Range, ' +
'or an object containing start and end.');
}
this.range = range;
};
Linegraph.prototype.repaint = function() {
var margin = this.options.margin,
range = this.range,
asSize = util.option.asSize,
asString = util.option.asString,
options = this.options,
orientation = this.getOption('orientation'),
resized = false,
frame = this.frame;
// TODO: document this feature to specify one margin for both item and axis distance
if (typeof margin === 'number') {
margin = {
item: margin,
axis: margin
};
}
// update className
this.frame.className = 'itemset' + (options.className ? (' ' + asString(options.className)) : '');
// check whether zoomed (in that case we need to re-stack everything)
// TODO: would be nicer to get this as a trigger from Range
var visibleInterval = this.range.end - this.range.start;
var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.width != this.lastWidth);
if (zoomed) this.stackDirty = true;
this.lastVisibleInterval = visibleInterval;
this.lastWidth = this.width;
// reposition frame
this.frame.style.left = asSize(options.left, '');
this.frame.style.right = asSize(options.right, '');
this.frame.style.top = asSize((orientation == 'top') ? '0' : '');
this.frame.style.bottom = asSize((orientation == 'top') ? '' : '0');
this.frame.style.width = asSize(options.width, '100%');
// frame.style.height = asSize(height);
//frame.style.height = asSize('height' in options ? options.height : height); // TODO: reckon with height
// calculate actual size and position
this.top = this.frame.offsetTop;
this.left = this.frame.offsetLeft;
this.width = this.frame.offsetWidth;
// this.height = height;
// check if this component is resized
resized = this._isResized() || resized;
if (resized) {
this.svg.style.width = asSize(3*this.width);
this.svg.style.left = asSize(-this.width);
}
if (zoomed) {
this.setData();
}
}

Loading…
Cancel
Save