Browse Source

auto scale yaxis

css_transitions
Alex de Mulder 10 years ago
parent
commit
2c949d9704
9 changed files with 144 additions and 58 deletions
  1. +10
    -0
      dist/vis.css
  2. +42
    -9
      dist/vis.js
  3. +1
    -1
      dist/vis.min.css
  4. +13
    -13
      dist/vis.min.js
  5. +26
    -26
      examples/graph2d/01_basic.html
  6. +39
    -8
      src/timeline/component/DataAxis.js
  7. +2
    -1
      src/timeline/component/Legend.js
  8. +1
    -0
      src/timeline/component/Linegraph.js
  9. +10
    -0
      src/timeline/component/css/dataaxis.css

+ 10
- 0
dist/vis.css View File

@ -340,6 +340,16 @@
} }
.vis.timeline .dataaxis .text.measure {
position: absolute;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
visibility: hidden;
}
.vis.timeline .dataaxis .yAxis.major { .vis.timeline .dataaxis .yAxis.major {
font-size:12px; font-size:12px;
width: 100%; width: 100%;

+ 42
- 9
dist/vis.js View File

@ -2640,7 +2640,8 @@ function Legend(body, options, linegraph) {
this.body = body; this.body = body;
this.linegraph = linegraph; this.linegraph = linegraph;
this.defaultOptions = { this.defaultOptions = {
orientation: 'left' // left, right
orientation: 'left', // left, right
position: 'left' // left, center, right
} }
this.options = util.extend({},this.defaultOptions); this.options = util.extend({},this.defaultOptions);
@ -2806,7 +2807,8 @@ function DataAxis (body, options) {
minorLinesOffset: 4, minorLinesOffset: 4,
labelOffsetX: 9, labelOffsetX: 9,
labelOffsetY: -6, labelOffsetY: -6,
width: '60px',
iconWidth: 20,
width: '40px',
height: '300px' height: '300px'
}; };
@ -2869,7 +2871,17 @@ DataAxis.prototype.setOptions = function(options) {
if (this.options.orientation != options.orientation && options.orientation !== undefined) { if (this.options.orientation != options.orientation && options.orientation !== undefined) {
redraw = true; redraw = true;
} }
var fields = ['orientation','showMinorLabels','showMajorLabels','width','height'];
var fields = [
'orientation',
'showMinorLabels',
'showMajorLabels',
'majorLinesOffset',
'minorLinesOffset',
'labelOffsetX',
'labelOffsetY',
'iconWidth',
'width',
'height'];
util.selectiveExtend(fields, this.options, options); util.selectiveExtend(fields, this.options, options);
if (redraw == true && this.dom.frame) { if (redraw == true && this.dom.frame) {
@ -2904,7 +2916,7 @@ DataAxis.prototype._create = function() {
DataAxis.prototype._redrawGroupIcons = function() { DataAxis.prototype._redrawGroupIcons = function() {
var x; var x;
var iconWidth = 20;
var iconWidth = this.options.iconWidth;
var iconHeight = 15; var iconHeight = 15;
var iconOffset = 4; var iconOffset = 4;
var y = iconOffset + 0.5 * iconHeight; var y = iconOffset + 0.5 * iconHeight;
@ -2915,7 +2927,6 @@ DataAxis.prototype._redrawGroupIcons = function() {
x = this.width - iconWidth - iconOffset; x = this.width - iconWidth - iconOffset;
} }
for (var groupId in this.groups) { for (var groupId in this.groups) {
if (this.groups.hasOwnProperty(groupId)) { if (this.groups.hasOwnProperty(groupId)) {
this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight); this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
@ -2975,6 +2986,8 @@ DataAxis.prototype.redraw = function () {
var props = this.props; var props = this.props;
var frame = this.dom.frame; var frame = this.dom.frame;
// update classname // update classname
frame.className = 'dataaxis'; frame.className = 'dataaxis';
@ -3029,6 +3042,8 @@ DataAxis.prototype._redrawLabels = function () {
var minimumStep = (this.props.minorCharHeight || 10); //in pixels var minimumStep = (this.props.minorCharHeight || 10); //in pixels
var step = new DataStep(start, end, minimumStep, this.dom.frame.offsetHeight); var step = new DataStep(start, end, minimumStep, this.dom.frame.offsetHeight);
this.step = step; this.step = step;
step.first();
// Move all DOM elements to a "redundant" list, where they // Move all DOM elements to a "redundant" list, where they
// can be picked for re-use, and clear the lists with lines and texts. // can be picked for re-use, and clear the lists with lines and texts.
@ -3039,7 +3054,6 @@ DataAxis.prototype._redrawLabels = function () {
dom.lines = []; dom.lines = [];
dom.labels = []; dom.labels = [];
step.first();
var stepPixels = this.dom.frame.offsetHeight / ((step.marginRange / step.step) + 1); var stepPixels = this.dom.frame.offsetHeight / ((step.marginRange / step.step) + 1);
this.stepPixels = stepPixels; this.stepPixels = stepPixels;
@ -3063,14 +3077,15 @@ DataAxis.prototype._redrawLabels = function () {
var max = 1; var max = 1;
step.next(); step.next();
this.maxLabelSize = 0;
var y = 0; var y = 0;
while (max < amountOfSteps) {
while (max < Math.round(amountOfSteps)) {
y = Math.round(max * stepPixels); y = Math.round(max * stepPixels);
marginStartPos = max * stepPixels; marginStartPos = max * stepPixels;
var isMajor = step.isMajor(); var isMajor = step.isMajor();
if (this.options['showMinorLabels'] && isMajor == false) { if (this.options['showMinorLabels'] && isMajor == false) {
this._redrawLabel(y - 2, step.getLabelMinor(), orientation, 'yAxis minor');
this._redrawLabel(y - 2, step.current, orientation, 'yAxis minor');
} }
if (isMajor && this.options['showMajorLabels']) { if (isMajor && this.options['showMajorLabels']) {
@ -3078,7 +3093,7 @@ DataAxis.prototype._redrawLabels = function () {
if (xFirstMajorLabel == undefined) { if (xFirstMajorLabel == undefined) {
xFirstMajorLabel = y; xFirstMajorLabel = y;
} }
this._redrawLabel(y - 2, step.getLabelMajor(), orientation, 'yAxis major');
this._redrawLabel(y - 2, step.current, orientation, 'yAxis major');
} }
this._redrawMajorLine(y, orientation); this._redrawMajorLine(y, orientation);
} }
@ -3090,6 +3105,16 @@ DataAxis.prototype._redrawLabels = function () {
max++; max++;
} }
var offset = this.drawIcons == true ? this.options.iconWidth + this.options.labelOffsetX : this.options.labelOffsetX;
if (this.maxLabelSize > (this.width - offset)) {
this.width = this.maxLabelSize + offset;
this.options.width = this.width + "px";
this.body.emitter.emit("changed");
this.redraw();
return;
}
this.conversionFactor = marginStartPos/((amountOfSteps-1) * step.step); this.conversionFactor = marginStartPos/((amountOfSteps-1) * step.step);
// Cleanup leftover DOM elements from the redundant list // Cleanup leftover DOM elements from the redundant list
@ -3152,6 +3177,12 @@ DataAxis.prototype._redrawLabel = function (y, text, orientation, className) {
} }
label.style.top = y + this.options.labelOffsetY + 'px'; label.style.top = y + this.options.labelOffsetY + 'px';
text += '';
var largestWidth = this.props.majorCharWidth > this.props.minorCharWidth ? this.props.majorCharWidth : this.props.minorCharWidth;
if (this.maxLabelSize < text.length * largestWidth) {
this.maxLabelSize = text.length * largestWidth;
}
}; };
/** /**
@ -3225,6 +3256,7 @@ DataAxis.prototype._redrawMajorLine = function (y, orientation) {
DataAxis.prototype._calculateCharSize = function () { DataAxis.prototype._calculateCharSize = function () {
// determine the char width and height on the minor axis // determine the char width and height on the minor axis
if (!('minorCharHeight' in this.props)) { if (!('minorCharHeight' in this.props)) {
var textMinor = document.createTextNode('0'); var textMinor = document.createTextNode('0');
var measureCharMinor = document.createElement('DIV'); var measureCharMinor = document.createElement('DIV');
measureCharMinor.className = 'text minor measure'; measureCharMinor.className = 'text minor measure';
@ -4085,6 +4117,7 @@ Linegraph.prototype._prepareData = function (dataset, options) {
} }
for (var i = 0; i < dataset.length; i++) { for (var i = 0; i < dataset.length; i++) {
xValue = toScreen(new Date(dataset[i].x)) + this.width; xValue = toScreen(new Date(dataset[i].x)) + this.width;
console.log(dataset[i].x, new Date(dataset[i].x))
yValue = axis.convertValue(dataset[i].y); yValue = axis.convertValue(dataset[i].y);
extractedData.push({x: xValue, y: yValue}); extractedData.push({x: xValue, y: yValue});
} }

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


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


+ 26
- 26
examples/graph2d/01_basic.html View File

@ -51,7 +51,7 @@
content: names[1], content: names[1],
className: "graphGroup1", className: "graphGroup1",
options: { options: {
yAxisOrientation: 'right',
// yAxisOrientation: 'right',
drawPoints: true, // square, circle drawPoints: true, // square, circle
shaded: { shaded: {
orientation: 'top' // top, bottom orientation: 'top' // top, bottom
@ -72,34 +72,34 @@
var container = document.getElementById('visualization'); var container = document.getElementById('visualization');
var items = [ var items = [
{x: '2014-06-11', y: 10000 },
{x: '2014-06-12', y: 25000 },
{x: '2014-06-13', y: 30000, group: 0},
{x: '2014-06-14', y: 10000, group: 0},
{x: '2014-06-15', y: 150000, group: 1},
{x: '2014-06-16', y: 300000, group: 1},
{x: '2014-06-17', y: 100, group: 1},
{x: '2014-06-18', y: 150, group: 1},
{x: '2014-06-19', y: 520, group: 1},
{x: '2014-06-20', y: 100, group: 1},
{x: '2014-06-21', y: 19, group: 2},
{x: '2014-06-22', y: 60, group: 2},
{x: '2014-06-23', y: 10, group: 2},
{x: '2014-06-24', y: 25, group: 2},
{x: '2014-06-25', y: 30, group: 2}
// {x: '2014-06-11', y: 10},
// {x: '2014-06-12', y: 25},
// {x: '2014-06-13', y: 30},
// {x: '2014-06-14', y: 10},
// {x: '2014-06-15', y: 15},
// {x: '2014-06-16', y: 30}
// {x: '2014-06-11', y: 10 },
// {x: '2014-06-12', y: 25 },
// {x: '2014-06-13', y: 30, group: 0},
// {x: '2014-06-14', y: 10, group: 0},
// {x: '2014-06-15', y: 15, group: 1},
// {x: '2014-06-16', y: 30, group: 1},
// {x: '2014-06-17', y: 100, group: 1},
// {x: '2014-06-18', y: 150, group: 1},
// {x: '2014-06-19', y: 520, group: 1},
// {x: '2014-06-20', y: 100, group: 1},
// {x: '2014-06-21', y: 19, group: 2},
// {x: '2014-06-22', y: 60, group: 2},
// {x: '2014-06-23', y: 10, group: 2},
// {x: '2014-06-24', y: 25, group: 2},
// {x: '2014-06-25', y: 30, group: 2}
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
]; ];
var dataset = new vis.DataSet(items); var dataset = new vis.DataSet(items);
var graph2d = new vis.Graph2d(container);
graph2d.setOptions(options);
graph2d.setGroups(groups);
graph2d.setItems(dataset);
var graph2d = new vis.Graph2d(container, items, {});
// graph2d.setOptions(options);
// graph2d.setGroups(groups);
// graph2d.setItems(items);
</script> </script>
</body> </body>

+ 39
- 8
src/timeline/component/DataAxis.js View File

@ -17,7 +17,8 @@ function DataAxis (body, options) {
minorLinesOffset: 4, minorLinesOffset: 4,
labelOffsetX: 9, labelOffsetX: 9,
labelOffsetY: -6, labelOffsetY: -6,
width: '60px',
iconWidth: 20,
width: '40px',
height: '300px' height: '300px'
}; };
@ -80,7 +81,17 @@ DataAxis.prototype.setOptions = function(options) {
if (this.options.orientation != options.orientation && options.orientation !== undefined) { if (this.options.orientation != options.orientation && options.orientation !== undefined) {
redraw = true; redraw = true;
} }
var fields = ['orientation','showMinorLabels','showMajorLabels','width','height'];
var fields = [
'orientation',
'showMinorLabels',
'showMajorLabels',
'majorLinesOffset',
'minorLinesOffset',
'labelOffsetX',
'labelOffsetY',
'iconWidth',
'width',
'height'];
util.selectiveExtend(fields, this.options, options); util.selectiveExtend(fields, this.options, options);
if (redraw == true && this.dom.frame) { if (redraw == true && this.dom.frame) {
@ -115,7 +126,7 @@ DataAxis.prototype._create = function() {
DataAxis.prototype._redrawGroupIcons = function() { DataAxis.prototype._redrawGroupIcons = function() {
var x; var x;
var iconWidth = 20;
var iconWidth = this.options.iconWidth;
var iconHeight = 15; var iconHeight = 15;
var iconOffset = 4; var iconOffset = 4;
var y = iconOffset + 0.5 * iconHeight; var y = iconOffset + 0.5 * iconHeight;
@ -126,7 +137,6 @@ DataAxis.prototype._redrawGroupIcons = function() {
x = this.width - iconWidth - iconOffset; x = this.width - iconWidth - iconOffset;
} }
for (var groupId in this.groups) { for (var groupId in this.groups) {
if (this.groups.hasOwnProperty(groupId)) { if (this.groups.hasOwnProperty(groupId)) {
this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight); this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
@ -186,6 +196,8 @@ DataAxis.prototype.redraw = function () {
var props = this.props; var props = this.props;
var frame = this.dom.frame; var frame = this.dom.frame;
// update classname // update classname
frame.className = 'dataaxis'; frame.className = 'dataaxis';
@ -240,6 +252,8 @@ DataAxis.prototype._redrawLabels = function () {
var minimumStep = (this.props.minorCharHeight || 10); //in pixels var minimumStep = (this.props.minorCharHeight || 10); //in pixels
var step = new DataStep(start, end, minimumStep, this.dom.frame.offsetHeight); var step = new DataStep(start, end, minimumStep, this.dom.frame.offsetHeight);
this.step = step; this.step = step;
step.first();
// Move all DOM elements to a "redundant" list, where they // Move all DOM elements to a "redundant" list, where they
// can be picked for re-use, and clear the lists with lines and texts. // can be picked for re-use, and clear the lists with lines and texts.
@ -250,7 +264,6 @@ DataAxis.prototype._redrawLabels = function () {
dom.lines = []; dom.lines = [];
dom.labels = []; dom.labels = [];
step.first();
var stepPixels = this.dom.frame.offsetHeight / ((step.marginRange / step.step) + 1); var stepPixels = this.dom.frame.offsetHeight / ((step.marginRange / step.step) + 1);
this.stepPixels = stepPixels; this.stepPixels = stepPixels;
@ -274,14 +287,15 @@ DataAxis.prototype._redrawLabels = function () {
var max = 1; var max = 1;
step.next(); step.next();
this.maxLabelSize = 0;
var y = 0; var y = 0;
while (max < amountOfSteps) {
while (max < Math.round(amountOfSteps)) {
y = Math.round(max * stepPixels); y = Math.round(max * stepPixels);
marginStartPos = max * stepPixels; marginStartPos = max * stepPixels;
var isMajor = step.isMajor(); var isMajor = step.isMajor();
if (this.options['showMinorLabels'] && isMajor == false) { if (this.options['showMinorLabels'] && isMajor == false) {
this._redrawLabel(y - 2, step.getLabelMinor(), orientation, 'yAxis minor');
this._redrawLabel(y - 2, step.current, orientation, 'yAxis minor');
} }
if (isMajor && this.options['showMajorLabels']) { if (isMajor && this.options['showMajorLabels']) {
@ -289,7 +303,7 @@ DataAxis.prototype._redrawLabels = function () {
if (xFirstMajorLabel == undefined) { if (xFirstMajorLabel == undefined) {
xFirstMajorLabel = y; xFirstMajorLabel = y;
} }
this._redrawLabel(y - 2, step.getLabelMajor(), orientation, 'yAxis major');
this._redrawLabel(y - 2, step.current, orientation, 'yAxis major');
} }
this._redrawMajorLine(y, orientation); this._redrawMajorLine(y, orientation);
} }
@ -301,6 +315,16 @@ DataAxis.prototype._redrawLabels = function () {
max++; max++;
} }
var offset = this.drawIcons == true ? this.options.iconWidth + this.options.labelOffsetX : this.options.labelOffsetX;
if (this.maxLabelSize > (this.width - offset)) {
this.width = this.maxLabelSize + offset;
this.options.width = this.width + "px";
this.body.emitter.emit("changed");
this.redraw();
return;
}
this.conversionFactor = marginStartPos/((amountOfSteps-1) * step.step); this.conversionFactor = marginStartPos/((amountOfSteps-1) * step.step);
// Cleanup leftover DOM elements from the redundant list // Cleanup leftover DOM elements from the redundant list
@ -363,6 +387,12 @@ DataAxis.prototype._redrawLabel = function (y, text, orientation, className) {
} }
label.style.top = y + this.options.labelOffsetY + 'px'; label.style.top = y + this.options.labelOffsetY + 'px';
text += '';
var largestWidth = this.props.majorCharWidth > this.props.minorCharWidth ? this.props.majorCharWidth : this.props.minorCharWidth;
if (this.maxLabelSize < text.length * largestWidth) {
this.maxLabelSize = text.length * largestWidth;
}
}; };
/** /**
@ -436,6 +466,7 @@ DataAxis.prototype._redrawMajorLine = function (y, orientation) {
DataAxis.prototype._calculateCharSize = function () { DataAxis.prototype._calculateCharSize = function () {
// determine the char width and height on the minor axis // determine the char width and height on the minor axis
if (!('minorCharHeight' in this.props)) { if (!('minorCharHeight' in this.props)) {
var textMinor = document.createTextNode('0'); var textMinor = document.createTextNode('0');
var measureCharMinor = document.createElement('DIV'); var measureCharMinor = document.createElement('DIV');
measureCharMinor.className = 'text minor measure'; measureCharMinor.className = 'text minor measure';

+ 2
- 1
src/timeline/component/Legend.js View File

@ -5,7 +5,8 @@ function Legend(body, options, linegraph) {
this.body = body; this.body = body;
this.linegraph = linegraph; this.linegraph = linegraph;
this.defaultOptions = { this.defaultOptions = {
orientation: 'left' // left, right
orientation: 'left', // left, right
position: 'left' // left, center, right
} }
this.options = util.extend({},this.defaultOptions); this.options = util.extend({},this.defaultOptions);

+ 1
- 0
src/timeline/component/Linegraph.js View File

@ -820,6 +820,7 @@ Linegraph.prototype._prepareData = function (dataset, options) {
} }
for (var i = 0; i < dataset.length; i++) { for (var i = 0; i < dataset.length; i++) {
xValue = toScreen(new Date(dataset[i].x)) + this.width; xValue = toScreen(new Date(dataset[i].x)) + this.width;
console.log(dataset[i].x, new Date(dataset[i].x))
yValue = axis.convertValue(dataset[i].y); yValue = axis.convertValue(dataset[i].y);
extractedData.push({x: xValue, y: yValue}); extractedData.push({x: xValue, y: yValue});
} }

+ 10
- 0
src/timeline/component/css/dataaxis.css View File

@ -16,6 +16,16 @@
} }
.vis.timeline .dataaxis .text.measure {
position: absolute;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
visibility: hidden;
}
.vis.timeline .dataaxis .yAxis.major { .vis.timeline .dataaxis .yAxis.major {
font-size:12px; font-size:12px;
width: 100%; width: 100%;

Loading…
Cancel
Save