Browse Source

[Timeline] Align current time (#3718)

* add alignCurrentTime option

* update docs

* add available values
develop
Francesco Stefanini 6 years ago
committed by Yotam Berkowitz
parent
commit
d2cfa84df8
5 changed files with 27 additions and 1 deletions
  1. +7
    -0
      docs/graph2d/index.html
  2. +7
    -0
      docs/timeline/index.html
  3. +9
    -1
      lib/timeline/component/CurrentTime.js
  4. +2
    -0
      lib/timeline/optionsGraph2d.js
  5. +2
    -0
      lib/timeline/optionsTimeline.js

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

@ -782,6 +782,13 @@ onRender: function(item, group, graph2d) {
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr>
<td>alignCurrentTime</td>
<td>String</td>
<td>none</td>
<td>If set, the current time bar will be aligned to the start of the chosen unit of time. Available values are 'year', 'month', 'quarter', 'week', 'isoWeek', 'day', 'date', 'hour', 'minute' or 'second'. If not provided, the current time bar will be updated at every tick.</td>
</tr>
<tr> <tr>
<td>autoResize</td> <td>autoResize</td>
<td>Boolean</td> <td>Boolean</td>

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

@ -515,6 +515,13 @@ var options = {
<td>Alignment of items with type 'box', 'range', and 'background'. Available values are 'auto' (default), 'center', 'left', or 'right'. For 'box' items, the 'auto' alignment is 'center'. For 'range' items, the auto alignment is dynamic: positioned left and shifted such that the contents is always visible on screen.</td> <td>Alignment of items with type 'box', 'range', and 'background'. Available values are 'auto' (default), 'center', 'left', or 'right'. For 'box' items, the 'auto' alignment is 'center'. For 'range' items, the auto alignment is dynamic: positioned left and shifted such that the contents is always visible on screen.</td>
</tr> </tr>
<tr>
<td>alignCurrentTime</td>
<td>String</td>
<td>none</td>
<td>If set, the current time bar will be aligned to the start of the chosen unit of time. Available values are 'year', 'month', 'quarter', 'week', 'isoWeek', 'day', 'date', 'hour', 'minute' or 'second'. If not provided, the current time bar will be updated at every tick.</td>
</tr>
<tr> <tr>
<td>autoResize</td> <td>autoResize</td>
<td>boolean</td> <td>boolean</td>

+ 9
- 1
lib/timeline/component/CurrentTime.js View File

@ -8,6 +8,7 @@ var locales = require('../locales');
* @param {{range: Range, dom: Object, domProps: Object}} body * @param {{range: Range, dom: Object, domProps: Object}} body
* @param {Object} [options] Available parameters: * @param {Object} [options] Available parameters:
* {Boolean} [showCurrentTime] * {Boolean} [showCurrentTime]
* {String} [alignCurrentTime]
* @constructor CurrentTime * @constructor CurrentTime
* @extends Component * @extends Component
*/ */
@ -18,6 +19,7 @@ function CurrentTime (body, options) {
this.defaultOptions = { this.defaultOptions = {
rtl: false, rtl: false,
showCurrentTime: true, showCurrentTime: true,
alignCurrentTime: undefined,
moment: moment, moment: moment,
locales: locales, locales: locales,
@ -61,11 +63,12 @@ CurrentTime.prototype.destroy = function () {
* Set options for the component. Options will be merged in current options. * Set options for the component. Options will be merged in current options.
* @param {Object} options Available parameters: * @param {Object} options Available parameters:
* {boolean} [showCurrentTime] * {boolean} [showCurrentTime]
* {String} [alignCurrentTime]
*/ */
CurrentTime.prototype.setOptions = function(options) { CurrentTime.prototype.setOptions = function(options) {
if (options) { if (options) {
// copy all options that we know // copy all options that we know
util.selectiveExtend(['rtl', 'showCurrentTime', 'moment', 'locale', 'locales'], this.options, options);
util.selectiveExtend(['rtl', 'showCurrentTime', 'alignCurrentTime', 'moment', 'locale', 'locales'], this.options, options);
} }
}; };
@ -87,6 +90,11 @@ CurrentTime.prototype.redraw = function() {
} }
var now = this.options.moment(new Date().valueOf() + this.offset); var now = this.options.moment(new Date().valueOf() + this.offset);
if (this.options.alignCurrentTime) {
now = now.startOf(this.options.alignCurrentTime);
}
var x = this.body.util.toScreen(now); var x = this.body.util.toScreen(now);
var locale = this.options.locales[this.options.locale]; var locale = this.options.locales[this.options.locale];

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

@ -25,6 +25,7 @@ let allOptions = {
}, },
//globals : //globals :
alignCurrentTime: {string, 'undefined': 'undefined'},
yAxisOrientation: {string:['left','right']}, yAxisOrientation: {string:['left','right']},
defaultGroup: {string}, defaultGroup: {string},
sort: {'boolean': bool}, sort: {'boolean': bool},
@ -169,6 +170,7 @@ let allOptions = {
let configureOptions = { let configureOptions = {
global: { global: {
alignCurrentTime: ['none', 'year', 'month', 'quarter', 'week', 'isoWeek', 'day', 'date', 'hour', 'minute', 'second'],
//yAxisOrientation: ['left','right'], // TDOO: enable as soon as Grahp2d doesn't crash when changing this on the fly //yAxisOrientation: ['left','right'], // TDOO: enable as soon as Grahp2d doesn't crash when changing this on the fly
sort: true, sort: true,
sampling: true, sampling: true,

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

@ -25,6 +25,7 @@ let allOptions = {
//globals : //globals :
align: {string}, align: {string},
alignCurrentTime: {string, 'undefined': 'undefined'},
rtl: { 'boolean': bool, 'undefined': 'undefined'}, rtl: { 'boolean': bool, 'undefined': 'undefined'},
rollingMode: { rollingMode: {
follow: { 'boolean': bool }, follow: { 'boolean': bool },
@ -179,6 +180,7 @@ let allOptions = {
let configureOptions = { let configureOptions = {
global: { global: {
align: ['center', 'left', 'right'], align: ['center', 'left', 'right'],
alignCurrentTime: ['none', 'year', 'month', 'quarter', 'week', 'isoWeek', 'day', 'date', 'hour', 'minute', 'second'],
direction: false, direction: false,
autoResize: true, autoResize: true,
clickToUse: false, clickToUse: false,

Loading…
Cancel
Save