diff --git a/HISTORY.md b/HISTORY.md
index 8601dcc9..5da953ce 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -23,7 +23,6 @@ http://visjs.org
- Fixed #1416: Fixed error in improvedLayout.
- Improvements on hierarchical layout.
-
### Timeline
- Implemented option `itemsAlwaysDraggable`, See #1395. Thanks @liuqingc.
@@ -31,7 +30,9 @@ http://visjs.org
- Implemented property `oldData` on change events of the DataSet, and
deprecated the `data` property which wrongly contained new data instead of
old data. Thanks @hansmaulwurf23.
+- Implemented option `maxMinorChars` to customize the width of the grid.
- Expose `vis.timeline.Core` for customization purposes.
+- Fixed #1449, #1393: text of minor grids sometimes not being drawn.
### Graph2d
@@ -43,7 +44,7 @@ http://visjs.org
- Performance improvements (see #1381). Thanks @phimimms.
-## 2015-01-01, version 4.9.0
+## 2015-10-01, version 4.9.0
### Network
diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html
index aba25cd7..630b3440 100644
--- a/docs/graph2d/index.html
+++ b/docs/graph2d/index.html
@@ -927,6 +927,16 @@ function (option, path) {
| Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px". |
+
+ | maxMinorChars |
+ number |
+ 7 |
+
+ Specifies the maximum number of characters that should fit in minor grid labels.
+ If larger, less and wider grids will be drawn.
+ |
+
+
| min |
Date or Number or String |
diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index d3e350df..94da630f 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -742,6 +742,16 @@ function (option, path) {
Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px". |
+
+ | maxMinorChars |
+ number |
+ 7 |
+
+ Specifies the maximum number of characters that should fit in minor grid labels.
+ If larger, less and wider grids will be drawn.
+ |
+
+
| min |
Date or Number or String or Moment |
diff --git a/lib/timeline/component/TimeAxis.js b/lib/timeline/component/TimeAxis.js
index dec23f83..136179b4 100644
--- a/lib/timeline/component/TimeAxis.js
+++ b/lib/timeline/component/TimeAxis.js
@@ -39,6 +39,7 @@ function TimeAxis (body, options) {
}, // axis orientation: 'top' or 'bottom'
showMinorLabels: true,
showMajorLabels: true,
+ maxMinorChars: 7,
format: TimeStep.FORMAT,
moment: moment,
timeAxis: null
@@ -69,6 +70,7 @@ TimeAxis.prototype.setOptions = function(options) {
util.selectiveExtend([
'showMinorLabels',
'showMajorLabels',
+ 'maxMinorChars',
'hiddenDates',
'timeAxis',
'moment'
@@ -195,7 +197,7 @@ TimeAxis.prototype._repaintLabels = function () {
// calculate range and step (step such that we have space for 7 characters per label)
var start = util.convert(this.body.range.start, 'Number');
var end = util.convert(this.body.range.end, 'Number');
- var timeLabelsize = this.body.util.toTime((this.props.minorCharWidth || 10) * 7).valueOf();
+ var timeLabelsize = this.body.util.toTime((this.props.minorCharWidth || 10) * this.options.maxMinorChars).valueOf();
var minimumStep = timeLabelsize - DateUtil.getHiddenDurationBefore(this.options.moment, this.body.hiddenDates, this.body.range, timeLabelsize);
minimumStep -= this.body.util.toTime(0).valueOf();
@@ -224,19 +226,20 @@ TimeAxis.prototype._repaintLabels = function () {
var next;
var x;
var xNext;
- var isMajor;
- var width;
+ var isMajor, nextIsMajor;
+ var width = 0, prevWidth;
var line;
var labelMinor;
var xFirstMajorLabel = undefined;
- var max = 0;
+ var count = 0;
+ const MAX = 1000;
var className;
step.start();
next = step.getCurrent();
xNext = this.body.util.toScreen(next);
- while (step.hasNext() && max < 1000) {
- max++;
+ while (step.hasNext() && count < MAX) {
+ count++;
isMajor = step.isMajor();
className = step.getClassName();
@@ -247,13 +250,16 @@ TimeAxis.prototype._repaintLabels = function () {
step.next();
next = step.getCurrent();
+ nextIsMajor = step.isMajor();
xNext = this.body.util.toScreen(next);
+ prevWidth = width;
width = xNext - x;
- var labelFits = (labelMinor.length + 1) * this.props.minorCharWidth < width;
+ var showMinorGrid = (width >= prevWidth * 0.4); // prevent displaying of the 31th of the month on a scale of 5 days
- if (this.options.showMinorLabels && labelFits) {
- this._repaintMinorText(x, labelMinor, orientation, className);
+ if (this.options.showMinorLabels && showMinorGrid) {
+ var label = this._repaintMinorText(x, labelMinor, orientation, className);
+ label.style.width = width + 'px'; // set width to prevent overflow
}
if (isMajor && this.options.showMajorLabels) {
@@ -261,22 +267,28 @@ TimeAxis.prototype._repaintLabels = function () {
if (xFirstMajorLabel == undefined) {
xFirstMajorLabel = x;
}
- this._repaintMajorText(x, step.getLabelMajor(), orientation, className);
+ label = this._repaintMajorText(x, step.getLabelMajor(), orientation, className);
}
line = this._repaintMajorLine(x, width, orientation, className);
}
- else {
- if (labelFits) {
+ else { // minor line
+ if (showMinorGrid) {
line = this._repaintMinorLine(x, width, orientation, className);
}
else {
if (line) {
- line.style.width = (parseInt (line.style.width) + width) + 'px'
+ // adjust the width of the previous grid
+ line.style.width = (parseInt (line.style.width) + width) + 'px';
}
}
}
}
+ if (count === MAX && !warnedForOverflow) {
+ console.warn(`Something is wrong with the Timeline scale. Limited drawing of grid lines to ${MAX} lines.`);
+ warnedForOverflow = true;
+ }
+
// create a major label on the left when needed
if (this.options.showMajorLabels) {
var leftTime = this.body.util.toTime(0),
@@ -467,4 +479,7 @@ TimeAxis.prototype._calculateCharSize = function () {
this.props.majorCharWidth = this.dom.measureCharMajor.clientWidth;
};
+
+var warnedForOverflow = false;
+
module.exports = TimeAxis;
diff --git a/lib/timeline/optionsGraph2d.js b/lib/timeline/optionsGraph2d.js
index a2faf89d..f323a01f 100644
--- a/lib/timeline/optionsGraph2d.js
+++ b/lib/timeline/optionsGraph2d.js
@@ -141,6 +141,7 @@ let allOptions = {
},
max: {date, number, string, moment},
maxHeight: {number, string},
+ maxMinorChars: {number},
min: {date, number, string, moment},
minHeight: {number, string},
moveable: {boolean},
@@ -250,6 +251,7 @@ let configureOptions = {
locale: '',
max: '',
maxHeight: '',
+ maxMinorChars: 7,
min: '',
minHeight: '',
moveable:true,
diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js
index 6474914f..f71c4935 100644
--- a/lib/timeline/optionsTimeline.js
+++ b/lib/timeline/optionsTimeline.js
@@ -96,6 +96,7 @@ let allOptions = {
},
max: {date, number, string, moment},
maxHeight: {number, string},
+ maxMinorChars: {number},
min: {date, number, string, moment},
minHeight: {number, string},
moveable: {boolean},
@@ -190,6 +191,7 @@ let configureOptions = {
},
max: '',
maxHeight: '',
+ maxMinorChars: 7,
min: '',
minHeight: '',
moveable: false,
diff --git a/test/timeline.html b/test/timeline.html
index 27e5ed25..9cc1f384 100644
--- a/test/timeline.html
+++ b/test/timeline.html
@@ -216,6 +216,8 @@
items.on('update', console.log.bind(console));
items.on('remove', console.log.bind(console));
+
+// timeline.setOptions({timeAxis:{scale: 'minute', step: 5}})