From f516cb0721248ef5c5792195739aee1bc2e5fb79 Mon Sep 17 00:00:00 2001 From: Ludo Stellingwerff Date: Mon, 30 May 2016 13:04:03 +0200 Subject: [PATCH] Fix right orientation axis for Graph2D, see examples/graph2d/05_bothAxis. It was broken by PR (#1729), which fixed issues #112 & #1730. As far as I can tell that change shouldn't influence the DataAxis (vertical-axis), but only the horizontal axis. @yotamberk can you check if your examples still work as expected? --- lib/timeline/component/DataAxis.js | 78 +++++++++++++++--------------- 1 file changed, 40 insertions(+), 38 deletions(-) diff --git a/lib/timeline/component/DataAxis.js b/lib/timeline/component/DataAxis.js index 67af1974..e2cc569b 100644 --- a/lib/timeline/component/DataAxis.js +++ b/lib/timeline/component/DataAxis.js @@ -10,7 +10,7 @@ var DataScale = require('./DataScale'); * @extends Component * @param body */ -function DataAxis (body, options, svg, linegraphOptions) { +function DataAxis(body, options, svg, linegraphOptions) { this.id = util.randomUUID(); this.body = body; @@ -27,15 +27,19 @@ function DataAxis (body, options, svg, linegraphOptions) { width: '40px', visible: true, alignZeros: true, - left:{ - range: {min:undefined,max:undefined}, - format: function (value) {return ''+parseFloat(value.toPrecision(3));}, - title: {text:undefined,style:undefined} + left: { + range: {min: undefined, max: undefined}, + format: function (value) { + return '' + parseFloat(value.toPrecision(3)); + }, + title: {text: undefined, style: undefined} }, - right:{ - range: {min:undefined,max:undefined}, - format: function (value) {return ''+parseFloat(value.toPrecision(3));}, - title: {text:undefined,style:undefined} + right: { + range: {min: undefined, max: undefined}, + format: function (value) { + return '' + parseFloat(value.toPrecision(3)); + }, + title: {text: undefined, style: undefined} } }; @@ -49,14 +53,14 @@ function DataAxis (body, options, svg, linegraphOptions) { }; this.dom = {}; - this.scale= undefined; - this.range = {start:0, end:0}; + this.scale = undefined; + 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.width = Number(('' + this.options.width).replace("px", "")); this.minWidth = this.width; this.height = this.linegraphSVG.getBoundingClientRect().height; this.hidden = false; @@ -79,7 +83,7 @@ function DataAxis (body, options, svg, linegraphOptions) { this.framework = {svg: this.svg, svgElements: this.svgElements, options: this.options, groups: this.groups}; var me = this; - this.body.emitter.on("verticalDrag", function() { + this.body.emitter.on("verticalDrag", function () { me.dom.lineContainer.style.top = me.body.domProps.scrollTop + 'px'; }); } @@ -87,21 +91,21 @@ function DataAxis (body, options, svg, linegraphOptions) { DataAxis.prototype = new Component(); -DataAxis.prototype.addGroup = function(label, graphOptions) { +DataAxis.prototype.addGroup = function (label, graphOptions) { if (!this.groups.hasOwnProperty(label)) { this.groups[label] = graphOptions; } this.amountOfGroups += 1; }; -DataAxis.prototype.updateGroup = function(label, graphOptions) { +DataAxis.prototype.updateGroup = function (label, graphOptions) { if (!this.groups.hasOwnProperty(label)) { this.amountOfGroups += 1; } this.groups[label] = graphOptions; }; -DataAxis.prototype.removeGroup = function(label) { +DataAxis.prototype.removeGroup = function (label) { if (this.groups.hasOwnProperty(label)) { delete this.groups[label]; this.amountOfGroups -= 1; @@ -133,7 +137,7 @@ DataAxis.prototype.setOptions = function (options) { ]; util.selectiveDeepExtend(fields, this.options, options); - this.minWidth = Number(('' + this.options.width).replace("px","")); + this.minWidth = Number(('' + this.options.width).replace("px", "")); if (redraw === true && this.dom.frame) { this.hide(); this.show(); @@ -145,7 +149,7 @@ DataAxis.prototype.setOptions = function (options) { /** * Create the HTML DOM for the DataAxis */ -DataAxis.prototype._create = function() { +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; @@ -156,7 +160,7 @@ DataAxis.prototype._create = function() { 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 = document.createElementNS('http://www.w3.org/2000/svg', "svg"); this.svg.style.position = "absolute"; this.svg.style.top = '0px'; this.svg.style.height = '100%'; @@ -182,7 +186,7 @@ DataAxis.prototype._redrawGroupIcons = function () { } var groupArray = Object.keys(this.groups); - groupArray.sort(function (a,b) { + groupArray.sort(function (a, b) { return (a < b ? -1 : 1); }) @@ -198,7 +202,7 @@ DataAxis.prototype._redrawGroupIcons = function () { this.iconsRemoved = false; }; -DataAxis.prototype._cleanupIcons = function() { +DataAxis.prototype._cleanupIcons = function () { if (this.iconsRemoved === false) { DOMutil.prepareElements(this.svgElements); DOMutil.cleanupElements(this.svgElements); @@ -209,14 +213,14 @@ DataAxis.prototype._cleanupIcons = function() { /** * Create the HTML DOM for the DataAxis */ -DataAxis.prototype.show = function() { +DataAxis.prototype.show = function () { this.hidden = false; if (!this.dom.frame.parentNode) { - if (this.options.rtl) { + if (this.options.orientation === 'left') { this.body.dom.left.appendChild(this.dom.frame); } else { - this.body.dom.left.appendChild(this.dom.frame); + this.body.dom.right.appendChild(this.dom.frame); } } @@ -228,7 +232,7 @@ DataAxis.prototype.show = function() { /** * Create the HTML DOM for the DataAxis */ -DataAxis.prototype.hide = function() { +DataAxis.prototype.hide = function () { this.hidden = true; if (this.dom.frame.parentNode) { this.dom.frame.parentNode.removeChild(this.dom.frame); @@ -273,11 +277,11 @@ DataAxis.prototype.redraw = function () { } else { this.show(); - this.height = Number(this.linegraphSVG.style.height.replace("px","")); + 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; + this.width = this.options.visible === true ? Number(('' + this.options.width).replace("px", "")) : 0; var props = this.props; var frame = this.dom.frame; @@ -345,16 +349,16 @@ DataAxis.prototype._redrawLabels = function () { DOMutil.prepareElements(this.DOMelements.lines); DOMutil.prepareElements(this.DOMelements.labels); var orientation = this.options['orientation']; - var customRange = this.options[orientation].range != undefined? this.options[orientation].range:{}; + var customRange = this.options[orientation].range != undefined ? this.options[orientation].range : {}; //Override range with manual options: var autoScaleEnd = true; - if (customRange.max != undefined){ + if (customRange.max != undefined) { this.range.end = customRange.max; autoScaleEnd = false; } var autoScaleStart = true; - if (customRange.min != undefined){ + if (customRange.min != undefined) { this.range.start = customRange.min; autoScaleStart = false; } @@ -370,8 +374,8 @@ DataAxis.prototype._redrawLabels = function () { this.options[orientation].format ); - if (this.master === false && this.masterAxis != undefined){ - this.scale.followScale(this.masterAxis.scale); + if (this.master === false && this.masterAxis != undefined) { + this.scale.followScale(this.masterAxis.scale); } //Is updated in side-effect of _redrawLabel(): @@ -418,7 +422,7 @@ DataAxis.prototype._redrawLabels = function () { } // 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.width = Math.max(this.minWidth, this.maxLabelSize + offset); this.options.width = this.width + "px"; DOMutil.cleanupElements(this.DOMelements.lines); DOMutil.cleanupElements(this.DOMelements.labels); @@ -453,7 +457,7 @@ DataAxis.prototype.screenToValue = function (x) { */ 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(); + 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') { @@ -469,7 +473,7 @@ DataAxis.prototype._redrawLabel = function (y, text, orientation, className, cha text += ''; - var largestWidth = Math.max(this.props.majorCharWidth,this.props.minorCharWidth); + var largestWidth = Math.max(this.props.majorCharWidth, this.props.minorCharWidth); if (this.maxLabelSize < text.length * largestWidth) { this.maxLabelSize = text.length * largestWidth; } @@ -485,7 +489,7 @@ DataAxis.prototype._redrawLabel = function (y, text, orientation, className, cha */ 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(); + var line = DOMutil.getDOMElement('div', this.DOMelements.lines, this.dom.lineContainer);//this.dom.redundant.lines.shift(); line.className = className; line.innerHTML = ''; @@ -535,8 +539,6 @@ DataAxis.prototype._redrawTitle = function (orientation) { }; - - /** * 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.