From 7c33b3eb92264b097c588f9ab0cd73eac8325c81 Mon Sep 17 00:00:00 2001 From: jos Date: Thu, 8 Jan 2015 09:52:21 +0100 Subject: [PATCH] Added classNames to vertical grid lines --- lib/timeline/TimeStep.js | 74 +++++++++++++++++++++++++ lib/timeline/component/TimeAxis.js | 37 +++++++++---- lib/timeline/component/css/timeaxis.css | 2 +- test/timeline.html | 8 ++- 4 files changed, 108 insertions(+), 13 deletions(-) diff --git a/lib/timeline/TimeStep.js b/lib/timeline/TimeStep.js index 01785c6a..968d90fb 100644 --- a/lib/timeline/TimeStep.js +++ b/lib/timeline/TimeStep.js @@ -526,4 +526,78 @@ TimeStep.prototype.getLabelMajor = function(date) { return (format && format.length > 0) ? moment(date).format(format) : ''; }; +TimeStep.prototype.getClassName = function() { + var date = moment(this.current).locale('en'); + var step = this.step; + + // TODO: if step is not 1, change the className to something like '0-4h' + + function even(value) { + return (value / step % 2 == 0) ? ' even' : ' odd'; + } + + function today(date) { + if (date.isSame(new Date(), 'day')) { + return ' today'; + } + if (date.isSame(moment().add(1, 'day'), 'day')) { + return ' tomorrow'; + } + if (date.isSame(moment().add(-1, 'day'), 'day')) { + return ' yesterday'; + } + return ''; + } + + function currentWeek(date) { + return date.isSame(new Date(), 'week') ? ' current-week' : ''; + } + + function currentMonth(date) { + return date.isSame(new Date(), 'month') ? ' current-month' : ''; + } + + function currentYear(date) { + return date.isSame(new Date(), 'year') ? ' current-year' : ''; + } + + switch (this.scale) { + case 'millisecond': + return even(date.milliseconds()); + + case 'second': + return even(date.seconds()); + + case 'minute': + return even(date.minutes()); + + case 'hour': + var hour = date.hours(); + if (this.step == 4) { + hour = hour + '-' + (hour + 4); + } + return hour + 'h' + today(date) + even(hour); + + case 'weekday': + return date.format('dddd').toLowerCase() + + today(date) + currentWeek(date) + even(date.date()); + + case 'day': + var d = date.date(); + var month = date.format('MMMM').toLowerCase(); + return 'date' + d + ' ' + month + currentMonth(date) + even(d - 1); + + case 'month': + return date.format('MMMM').toLowerCase() + + currentMonth(date) + even(date.month()); + + case 'year': + var year = date.year(); + return 'year' + year + currentYear(date)+ even(year); + + default: + return ''; + } +}; + module.exports = TimeStep; diff --git a/lib/timeline/component/TimeAxis.js b/lib/timeline/component/TimeAxis.js index cc2c51c0..22c96224 100644 --- a/lib/timeline/component/TimeAxis.js +++ b/lib/timeline/component/TimeAxis.js @@ -208,23 +208,34 @@ TimeAxis.prototype._repaintLabels = function () { var isMajor; var xPrev = 0; var width = 0; + var prevLine; var xFirstMajorLabel = undefined; var max = 0; + var className; step.first(); while (step.hasNext() && max < 1000) { max++; + cur = step.getCurrent(); isMajor = step.isMajor(); + className = step.getClassName(); xPrev = x; x = this.body.util.toScreen(cur); width = x - xPrev; + if (prevLine) { + prevLine.style.width = width + 'px'; + } + + // FIXME: the width is not always correct, for example on the month scale. if (this.options.showMinorLabels) { this._repaintMinorText(x, step.getLabelMinor(), orientation); } + // FIXME: the divs must be ordered so that you can use css odd/even classes + if (isMajor && this.options.showMajorLabels) { if (x > 0) { if (xFirstMajorLabel == undefined) { @@ -233,11 +244,11 @@ TimeAxis.prototype._repaintLabels = function () { this._repaintMajorText(x, step.getLabelMajor(), orientation); } if (this.options.showMajorLines == true) { - this._repaintMajorLine(x, width, orientation); + prevLine = this._repaintMajorLine(x, orientation, className); } } else if (this.options.showMinorLines == true) { - this._repaintMinorLine(x, width, orientation); + prevLine = this._repaintMinorLine(x, orientation, className); } step.next(); @@ -324,18 +335,18 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation) { /** * Create a minor line for the axis at position x * @param {Number} x - * @param {Number} width * @param {String} orientation "top" or "bottom" (default) + * @param {String} className + * @return {Element} Returns the created line * @private */ -TimeAxis.prototype._repaintMinorLine = function (x, width, orientation) { +TimeAxis.prototype._repaintMinorLine = function (x, orientation, className) { // reuse redundant line var line = this.dom.redundant.minorLines.shift(); if (!line) { // create vertical line line = document.createElement('div'); - line.className = 'grid vertical minor'; this.dom.background.appendChild(line); } this.dom.minorLines.push(line); @@ -348,25 +359,28 @@ TimeAxis.prototype._repaintMinorLine = function (x, width, orientation) { line.style.top = this.body.domProps.top.height + 'px'; } line.style.height = props.minorLineHeight + 'px'; - line.style.width = width + 'px'; line.style.left = (x - props.minorLineWidth / 2) + 'px'; + + line.className = 'grid vertical minor ' + className; + + return line; }; /** * Create a Major line for the axis at position x * @param {Number} x - * @param {Number} width * @param {String} orientation "top" or "bottom" (default) + * @param {String} className + * @return {Element} Returns the created line * @private */ -TimeAxis.prototype._repaintMajorLine = function (x, width, orientation) { +TimeAxis.prototype._repaintMajorLine = function (x, orientation, className) { // reuse redundant line var line = this.dom.redundant.majorLines.shift(); if (!line) { // create vertical line line = document.createElement('DIV'); - line.className = 'grid vertical major'; this.dom.background.appendChild(line); } this.dom.majorLines.push(line); @@ -379,8 +393,11 @@ TimeAxis.prototype._repaintMajorLine = function (x, width, orientation) { line.style.top = this.body.domProps.top.height + 'px'; } line.style.left = (x - props.majorLineWidth / 2) + 'px'; - line.style.width = width + 'px'; line.style.height = props.majorLineHeight + 'px'; + + line.className = 'grid vertical major ' + className; + + return line; }; /** diff --git a/lib/timeline/component/css/timeaxis.css b/lib/timeline/component/css/timeaxis.css index 59d50a5e..e880304d 100644 --- a/lib/timeline/component/css/timeaxis.css +++ b/lib/timeline/component/css/timeaxis.css @@ -36,7 +36,7 @@ .vis.timeline .timeaxis .grid.vertical { position: absolute; width: 0; - border-right: 1px solid; + border-left: 1px solid; } .vis.timeline .timeaxis .grid.minor { diff --git a/test/timeline.html b/test/timeline.html index 5f53a516..b80ae3fb 100644 --- a/test/timeline.html +++ b/test/timeline.html @@ -19,6 +19,10 @@ #visualization .itemset { /*background: rgba(255, 255, 0, 0.5);*/ } + + #visualization .grid.vertical.odd { + background: #f5f5f5; + } @@ -103,12 +107,12 @@ 'minute': 'dddd D MMMM', 'hour': 'dddd D MMMM' } - }, + } //clickToUse: true, //min: moment('2013-01-01'), //max: moment('2013-12-31'), //zoomMin: 1000 * 60 * 60 * 24, // 1 day - zoomMax: 1000 * 60 * 60 * 24 * 30 * 6 // 6 months + //zoomMax: 1000 * 60 * 60 * 24 * 30 * 6 // 6 months }; console.timeEnd('create dataset');