From 6453cd0d62f8d4202f87ada2a8c9938186f80a1c Mon Sep 17 00:00:00 2001 From: jos Date: Fri, 27 Nov 2015 15:26:59 +0100 Subject: [PATCH] Fixed #1449, #1393: text of minor grids sometimes not being drawn. Implemented option `maxMinorChars` to customize the width of the grids. --- HISTORY.md | 5 ++-- docs/graph2d/index.html | 10 ++++++++ docs/timeline/index.html | 10 ++++++++ lib/timeline/component/TimeAxis.js | 41 ++++++++++++++++++++---------- lib/timeline/optionsGraph2d.js | 2 ++ lib/timeline/optionsTimeline.js | 2 ++ test/timeline.html | 2 ++ 7 files changed, 57 insertions(+), 15 deletions(-) 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}}) \ No newline at end of file