jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

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?
codeClimate
Ludo Stellingwerff 8 years ago
parent
2c78738313
commit
f516cb0721
1 changed files with 40 additions and 38 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +40
    -38
      lib/timeline/component/DataAxis.js

+ 40
- 38
lib/timeline/component/DataAxis.js View File

@ -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.

Write Preview
Loading…
Cancel
Save