|
@ -143,7 +143,7 @@ function LineGraph(body, options) { |
|
|
this.COUNTER = 0; |
|
|
this.COUNTER = 0; |
|
|
this.body.emitter.on('rangechanged', function() { |
|
|
this.body.emitter.on('rangechanged', function() { |
|
|
me.lastStart = me.body.range.start; |
|
|
me.lastStart = me.body.range.start; |
|
|
me.svg.style.left = util.option.asSize(-me.width); |
|
|
|
|
|
|
|
|
me.svg.style.left = util.option.asSize(-me.props.width); |
|
|
me.redraw.call(me,true); |
|
|
me.redraw.call(me,true); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
@ -192,7 +192,7 @@ LineGraph.prototype._create = function(){ |
|
|
*/ |
|
|
*/ |
|
|
LineGraph.prototype.setOptions = function(options) { |
|
|
LineGraph.prototype.setOptions = function(options) { |
|
|
if (options) { |
|
|
if (options) { |
|
|
var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort','groups']; |
|
|
|
|
|
|
|
|
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) { |
|
|
if (options.graphHeight === undefined && options.height !== undefined && this.body.domProps.centerContainer.height !== undefined) { |
|
|
this.autoSizeSVG = true; |
|
|
this.autoSizeSVG = true; |
|
|
} |
|
|
} |
|
@ -543,44 +543,61 @@ LineGraph.prototype._updateUngrouped = function() { |
|
|
LineGraph.prototype.redraw = function(forceGraphUpdate) { |
|
|
LineGraph.prototype.redraw = function(forceGraphUpdate) { |
|
|
var resized = false; |
|
|
var resized = false; |
|
|
|
|
|
|
|
|
this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px'; |
|
|
|
|
|
if (this.lastWidth === undefined && this.width || this.lastWidth != this.width) { |
|
|
|
|
|
resized = true; |
|
|
|
|
|
|
|
|
// 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
|
|
|
// check if this component is resized
|
|
|
resized = this._isResized() || resized; |
|
|
resized = this._isResized() || resized; |
|
|
|
|
|
|
|
|
// check whether zoomed (in that case we need to re-stack everything)
|
|
|
// check whether zoomed (in that case we need to re-stack everything)
|
|
|
var visibleInterval = this.body.range.end - this.body.range.start; |
|
|
var visibleInterval = this.body.range.end - this.body.range.start; |
|
|
var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.width != this.lastWidth); // we get this from the range changed event
|
|
|
|
|
|
|
|
|
var zoomed = (visibleInterval != this.lastVisibleInterval); |
|
|
this.lastVisibleInterval = visibleInterval; |
|
|
this.lastVisibleInterval = visibleInterval; |
|
|
this.lastWidth = this.width; |
|
|
|
|
|
|
|
|
|
|
|
// calculate actual size and position
|
|
|
|
|
|
this.width = this.dom.frame.offsetWidth; |
|
|
|
|
|
|
|
|
|
|
|
// the svg element is three times as big as the width, this allows for fully dragging left and right
|
|
|
// 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
|
|
|
// without reloading the graph. the controls for this are bound to events in the constructor
|
|
|
if (resized == true) { |
|
|
if (resized == true) { |
|
|
this.svg.style.width = util.option.asSize(3*this.width); |
|
|
|
|
|
this.svg.style.left = util.option.asSize(-this.width); |
|
|
|
|
|
|
|
|
this.svg.style.width = util.option.asSize(3*this.props.width); |
|
|
|
|
|
this.svg.style.left = util.option.asSize(-this.props.width); |
|
|
|
|
|
if ((this.options.height + '').indexOf("%") != -1) { |
|
|
|
|
|
this.autoSizeSVG = true; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// update the height of the graph on each redraw of the graph.
|
|
|
|
|
|
if (this.autoSizeSVG == 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.autoSizeSVG = false; |
|
|
|
|
|
} |
|
|
|
|
|
else { |
|
|
|
|
|
this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// zoomed is here to ensure that animations are shown correctly.
|
|
|
// zoomed is here to ensure that animations are shown correctly.
|
|
|
if (zoomed == true || this.abortedGraphUpdate == true || forceGraphUpdate == true) { |
|
|
|
|
|
resized = resized || this._updateGraph(); |
|
|
|
|
|
|
|
|
if (resized == true || zoomed == true || this.abortedGraphUpdate == true || forceGraphUpdate == true) { |
|
|
|
|
|
resized = this._updateGraph() || resized; |
|
|
} |
|
|
} |
|
|
else { |
|
|
else { |
|
|
// move the whole svg while dragging
|
|
|
// move the whole svg while dragging
|
|
|
if (this.lastStart != 0) { |
|
|
if (this.lastStart != 0) { |
|
|
var offset = this.body.range.start - this.lastStart; |
|
|
var offset = this.body.range.start - this.lastStart; |
|
|
var range = this.body.range.end - this.body.range.start; |
|
|
var range = this.body.range.end - this.body.range.start; |
|
|
if (this.width != 0) { |
|
|
|
|
|
var rangePerPixelInv = this.width/range; |
|
|
|
|
|
|
|
|
if (this.props.width != 0) { |
|
|
|
|
|
var rangePerPixelInv = this.props.width/range; |
|
|
var xOffset = offset * rangePerPixelInv; |
|
|
var xOffset = offset * rangePerPixelInv; |
|
|
this.svg.style.left = (-this.width - xOffset) + 'px'; |
|
|
|
|
|
|
|
|
this.svg.style.left = (-this.props.width - xOffset) + 'px'; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
this.legendLeft.redraw(); |
|
|
this.legendLeft.redraw(); |
|
@ -597,22 +614,13 @@ LineGraph.prototype.redraw = function(forceGraphUpdate) { |
|
|
LineGraph.prototype._updateGraph = function () { |
|
|
LineGraph.prototype._updateGraph = function () { |
|
|
// reset the svg elements
|
|
|
// reset the svg elements
|
|
|
DOMutil.prepareElements(this.svgElements); |
|
|
DOMutil.prepareElements(this.svgElements); |
|
|
if (this.width != 0 && this.itemsData != null) { |
|
|
|
|
|
|
|
|
if (this.props.width != 0 && this.itemsData != null) { |
|
|
var group, i; |
|
|
var group, i; |
|
|
var preprocessedGroupData = {}; |
|
|
var preprocessedGroupData = {}; |
|
|
var processedGroupData = {}; |
|
|
var processedGroupData = {}; |
|
|
var groupRanges = {}; |
|
|
var groupRanges = {}; |
|
|
var changeCalled = false; |
|
|
var changeCalled = false; |
|
|
|
|
|
|
|
|
// update the height of the graph on each redraw of the graph.
|
|
|
|
|
|
if (this.autoSizeSVG == 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.autoSizeSVG = false; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// getting group Ids
|
|
|
// getting group Ids
|
|
|
var groupIds = []; |
|
|
var groupIds = []; |
|
|
for (var groupId in this.groups) { |
|
|
for (var groupId in this.groups) { |
|
@ -866,7 +874,6 @@ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) { |
|
|
} |
|
|
} |
|
|
changeCalled = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft) || changeCalled; |
|
|
changeCalled = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft) || changeCalled; |
|
|
changeCalled = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || changeCalled; |
|
|
changeCalled = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || changeCalled; |
|
|
|
|
|
|
|
|
if (yAxisRightUsed == true && yAxisLeftUsed == true) { |
|
|
if (yAxisRightUsed == true && yAxisLeftUsed == true) { |
|
|
this.yAxisLeft.drawIcons = true; |
|
|
this.yAxisLeft.drawIcons = true; |
|
|
this.yAxisRight.drawIcons = true; |
|
|
this.yAxisRight.drawIcons = true; |
|
@ -875,7 +882,6 @@ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) { |
|
|
this.yAxisLeft.drawIcons = false; |
|
|
this.yAxisLeft.drawIcons = false; |
|
|
this.yAxisRight.drawIcons = false; |
|
|
this.yAxisRight.drawIcons = false; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
this.yAxisRight.master = !yAxisLeftUsed; |
|
|
this.yAxisRight.master = !yAxisLeftUsed; |
|
|
|
|
|
|
|
|
if (this.yAxisRight.master == false) { |
|
|
if (this.yAxisRight.master == false) { |
|
@ -944,7 +950,7 @@ LineGraph.prototype._convertXcoordinates = function (datapoints) { |
|
|
var toScreen = this.body.util.toScreen; |
|
|
var toScreen = this.body.util.toScreen; |
|
|
|
|
|
|
|
|
for (var i = 0; i < datapoints.length; i++) { |
|
|
for (var i = 0; i < datapoints.length; i++) { |
|
|
xValue = toScreen(datapoints[i].x) + this.width; |
|
|
|
|
|
|
|
|
xValue = toScreen(datapoints[i].x) + this.props.width; |
|
|
yValue = datapoints[i].y; |
|
|
yValue = datapoints[i].y; |
|
|
extractedData.push({x: xValue, y: yValue}); |
|
|
extractedData.push({x: xValue, y: yValue}); |
|
|
} |
|
|
} |
|
@ -974,7 +980,7 @@ LineGraph.prototype._convertYcoordinates = function (datapoints, group) { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
for (var i = 0; i < datapoints.length; i++) { |
|
|
for (var i = 0; i < datapoints.length; i++) { |
|
|
xValue = toScreen(datapoints[i].x) + this.width; |
|
|
|
|
|
|
|
|
xValue = toScreen(datapoints[i].x) + this.props.width; |
|
|
yValue = Math.round(axis.convertValue(datapoints[i].y)); |
|
|
yValue = Math.round(axis.convertValue(datapoints[i].y)); |
|
|
extractedData.push({x: xValue, y: yValue}); |
|
|
extractedData.push({x: xValue, y: yValue}); |
|
|
} |
|
|
} |
|
|