Browse Source

Fixed #1449, #1393: text of minor grids sometimes not being drawn. Implemented option `maxMinorChars` to customize the width of the grids.

fixDataView
jos 9 years ago
parent
commit
6453cd0d62
7 changed files with 57 additions and 15 deletions
  1. +3
    -2
      HISTORY.md
  2. +10
    -0
      docs/graph2d/index.html
  3. +10
    -0
      docs/timeline/index.html
  4. +28
    -13
      lib/timeline/component/TimeAxis.js
  5. +2
    -0
      lib/timeline/optionsGraph2d.js
  6. +2
    -0
      lib/timeline/optionsTimeline.js
  7. +2
    -0
      test/timeline.html

+ 3
- 2
HISTORY.md View File

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

+ 10
- 0
docs/graph2d/index.html View File

@ -927,6 +927,16 @@ function (option, path) {
<td>Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
</tr>
<tr>
<td>maxMinorChars</td>
<td>number</td>
<td>7</td>
<td>
Specifies the maximum number of characters that should fit in minor grid labels.
If larger, less and wider grids will be drawn.
</td>
</tr>
<tr>
<td>min</td>
<td>Date or Number or String</td>

+ 10
- 0
docs/timeline/index.html View File

@ -742,6 +742,16 @@ function (option, path) {
<td>Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".</td>
</tr>
<tr>
<td>maxMinorChars</td>
<td>number</td>
<td>7</td>
<td>
Specifies the maximum number of characters that should fit in minor grid labels.
If larger, less and wider grids will be drawn.
</td>
</tr>
<tr>
<td>min</td>
<td>Date or Number or String or Moment</td>

+ 28
- 13
lib/timeline/component/TimeAxis.js View File

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

+ 2
- 0
lib/timeline/optionsGraph2d.js View File

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

+ 2
- 0
lib/timeline/optionsTimeline.js View File

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

+ 2
- 0
test/timeline.html View File

@ -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}})
</script>
</body>
</html>

Loading…
Cancel
Save