Browse Source

Introducing a zindex option to control the svg render order.

Provide the DataView.map() method similar to the DataSet one.
codeClimate
Ludo Stellingwerff 9 years ago
parent
commit
5249806fbd
5 changed files with 97 additions and 27 deletions
  1. +43
    -0
      lib/DataView.js
  2. +3
    -14
      lib/timeline/component/GraphGroup.js
  3. +30
    -12
      lib/timeline/component/LineGraph.js
  4. +4
    -1
      lib/timeline/optionsGraph2d.js
  5. +17
    -0
      lib/util.js

+ 43
- 0
lib/DataView.js View File

@ -230,6 +230,49 @@ DataView.prototype.getIds = function (options) {
return ids;
};
/**
* Map every item in the dataset.
* @param {function} callback
* @param {Object} [options] Available options:
* {Object.<String, String>} [type]
* {String[]} [fields] filter fields
* {function} [filter] filter items
* {String | function} [order] Order the items by
* a field name or custom sort function.
* @return {Object[]} mappedItems
*/
DataView.prototype.map = function (callback,options) {
var mappedItems = [];
if (this._data) {
var defaultFilter = this._options.filter;
var filter;
if (options && options.filter) {
if (defaultFilter) {
filter = function (item) {
return defaultFilter(item) && options.filter(item);
}
}
else {
filter = options.filter;
}
}
else {
filter = defaultFilter;
}
mappedItems = this._data.map(callback,{
filter: filter,
order: options && options.order
});
}
else {
mappedItems = [];
}
return mappedItems;
};
/**
* Get the DataSet to which this DataView is connected. In case there is a chain
* of multiple DataViews, the root DataSet of this chain is returned.

+ 3
- 14
lib/timeline/component/GraphGroup.js View File

@ -16,7 +16,7 @@ var Points = require('./graph2d_types/points');
*/
function GraphGroup(group, groupId, options, groupsUsingDefaultStyles) {
this.id = groupId;
var fields = ['sampling', 'style', 'sort', 'yAxisOrientation', 'barChart', 'drawPoints', 'shaded', 'interpolation'];
var fields = ['sampling', 'style', 'sort', 'yAxisOrientation', 'barChart', 'drawPoints', 'shaded', 'interpolation', 'zIndex'];
this.options = util.selectiveBridgeObject(fields, options);
this.usingDefaultStyle = group.className === undefined;
this.groupsUsingDefaultStyles = groupsUsingDefaultStyles;
@ -29,17 +29,6 @@ function GraphGroup(group, groupId, options, groupsUsingDefaultStyles) {
this.visible = group.visible === undefined ? true : group.visible;
}
function insertionSort (a,compare) {
for (var i = 0; i < a.length; i++) {
var k = a[i];
for (var j = i; j > 0 && compare(k,a[j - 1])<0; j--) {
a[j] = a[j - 1];
}
a[j] = k;
}
return a;
}
/**
* this loads a reference to all items in this group into this group.
* @param {array} items
@ -48,7 +37,7 @@ GraphGroup.prototype.setItems = function (items) {
if (items != null) {
this.itemsData = items;
if (this.options.sort == true) {
insertionSort(this.itemsData,function (a, b) {
util.insertSort(this.itemsData,function (a, b) {
return a.x > b.x ? 1 : -1;
});
}
@ -76,7 +65,7 @@ GraphGroup.prototype.setZeroPosition = function (pos) {
*/
GraphGroup.prototype.setOptions = function (options) {
if (options !== undefined) {
var fields = ['sampling', 'style', 'sort', 'yAxisOrientation', 'barChart', 'excludeFromLegend', 'excludeFromStacking'];
var fields = ['sampling', 'style', 'sort', 'yAxisOrientation', 'barChart', 'excludeFromLegend', 'excludeFromStacking', 'zIndex'];
util.selectiveDeepExtend(fields, this.options, options);
// if the group's drawPoints is a function delegate the callback to the onRender property

+ 30
- 12
lib/timeline/component/LineGraph.js View File

@ -26,6 +26,7 @@ function LineGraph(body, options) {
this.defaultOptions = {
yAxisOrientation: 'left',
defaultGroup: 'default',
groupOrder: 'order',
sort: true,
sampling: true,
stack: false,
@ -312,7 +313,6 @@ LineGraph.prototype.setItems = function (items) {
ids = this.itemsData.getIds();
this._onAdd(ids);
}
this.redraw(true);
};
@ -333,7 +333,9 @@ LineGraph.prototype.setGroups = function (groups) {
// 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 < groupIds.length; i++) {
this._removeGroup(groupIds[i]);
}
}
// replace the dataset
@ -358,7 +360,6 @@ LineGraph.prototype.setGroups = function (groups) {
ids = this.groupsData.getIds();
this._onAddGroups(ids);
}
this._onUpdate();
};
LineGraph.prototype._onUpdate = function (ids) {
@ -593,6 +594,31 @@ LineGraph.prototype.redraw = function (forceGraphUpdate) {
};
LineGraph.prototype._getSortedGroupIds = function(){
// getting group Ids
var grouplist = [];
for (var groupId in this.groups) {
if (this.groups.hasOwnProperty(groupId)) {
var group = this.groups[groupId];
if (group.visible == true && (this.options.groups.visibility[groupId] === undefined || this.options.groups.visibility[groupId] == true)) {
grouplist.push({id:groupId,zIndex:group.options.zIndex});
}
}
}
util.insertSort(grouplist,function(a,b){
var az = a.zIndex;
var bz = b.zIndex;
if (az === undefined) az=0;
if (bz === undefined) bz=0;
return az==bz? 0: (az<bz ? -1: 1);
});
var groupIds = new Array(grouplist.length);
for (var i=0; i< grouplist.length; i++){
groupIds[i] = grouplist[i].id;
}
return groupIds;
}
/**
* Update and redraw the graph.
*
@ -609,15 +635,7 @@ LineGraph.prototype._updateGraph = function () {
var maxDate = this.body.util.toGlobalTime(2 * this.body.domProps.root.width);
// 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);
}
}
}
var groupIds = this._getSortedGroupIds();
if (groupIds.length > 0) {
var groupsData = {};

+ 4
- 1
lib/timeline/optionsGraph2d.js View File

@ -27,6 +27,7 @@ let allOptions = {
//globals :
yAxisOrientation: {string:['left','right']},
defaultGroup: {string},
groupOrder: {string, 'function': 'function'},
sort: {boolean},
sampling: {boolean},
stack:{boolean},
@ -162,6 +163,7 @@ let allOptions = {
zoomKey: {string: ['ctrlKey', 'altKey', 'metaKey', '']},
zoomMax: {number},
zoomMin: {number},
zIndex: {number},
__type__: {object}
};
@ -265,7 +267,8 @@ let configureOptions = {
zoomable: true,
zoomKey: ['ctrlKey', 'altKey', 'metaKey', ''],
zoomMax: [315360000000000, 10, 315360000000000, 1],
zoomMin: [10, 10, 315360000000000, 1]
zoomMin: [10, 10, 315360000000000, 1],
zIndex: 0
}
};

+ 17
- 0
lib/util.js View File

@ -1253,6 +1253,23 @@ exports.bridgeObject = function (referenceObject) {
}
};
/**
* This method provides a stable sort implementation, very fast for presorted data
*
* @param a the array
* @param a order comparator
* @returns {the array}
*/
exports.insertSort = function (a,compare) {
for (var i = 0; i < a.length; i++) {
var k = a[i];
for (var j = i; j > 0 && compare(k,a[j - 1])<0; j--) {
a[j] = a[j - 1];
}
a[j] = k;
}
return a;
}
/**
* this is used to set the options of subobjects in the options object. A requirement of these subobjects

Loading…
Cancel
Save