jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Custom function label - fixes #1098 (#2145) 

* Hide vertically hidden ranged items in groups that are not visible
* Add custom function format for time labels
* fix misspell
* remove spaces
* remove backspace
* add backspaces
* Add docs and examples
* Fix docs
codeClimate
yotamberk 8 years ago
committed by Alexander Wunschik
parent
4079d2ce08
commit
12e2fa437d
5 changed files with 162 additions and 5 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +9
    -1
      docs/timeline/index.html
  2. +141
    -0
      examples/timeline/other/functionLabelFormats.html
  3. +8
    -0
      lib/timeline/TimeStep.js
  4. +2
    -2
      lib/timeline/component/Group.js
  5. +2
    -2
      lib/timeline/optionsTimeline.js

+ 9
- 1
docs/timeline/index.html View File

@ -557,7 +557,7 @@ function (option, path) {
<tr> <tr>
<td>format</td> <td>format</td>
<td>Object</td>
<td>Object or Function</td>
<td>none</td> <td>none</td>
<td> <td>
Apply custom date formatting of the labels on the time axis. The default value of <code>format</code> is: Apply custom date formatting of the labels on the time axis. The default value of <code>format</code> is:
@ -583,8 +583,16 @@ function (option, path) {
year: '' year: ''
} }
}</pre> }</pre>
For values which not provided in the customized <code>options.format</code>, the default values will be used. For values which not provided in the customized <code>options.format</code>, the default values will be used.
All available formatting syntax is described in the <a href="http://momentjs.com/docs/#/displaying/format/">docs of moment.js</a>. All available formatting syntax is described in the <a href="http://momentjs.com/docs/#/displaying/format/">docs of moment.js</a>.
<br>
You can also use a function format for each label. The function accepts as arguments the date, scale and step in that order, and expects to return a string for the label.
<pre class="prettyprint lang-js">function format({
minorLabels: Function(date: Date, scale: Number, step: Number),
majorLabels: Function(date: Date, scale: Number, step: Number)
}</pre>
</td> </td>
</tr> </tr>

+ 141
- 0
examples/timeline/other/functionLabelFormats.html View File

@ -0,0 +1,141 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Custom function label format example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head>
<body>
<p>
This example demonstrate using custom function label formats.
</p>
<div id="visualization"></div>
<script>
var now = moment().minutes(0).seconds(0).milliseconds(0);
var groupCount = 3;
var itemCount = 20;
// create a data set with groups
var names = ['John', 'Alston', 'Lee', 'Grant'];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({id: g, content: names[g]});
}
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 200, 'hours');
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
group: group,
content: 'item ' + i +
' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
start: start,
type: 'box'
});
}
// create visualization
var container = document.getElementById('visualization');
var options = {
format: {
minorLabels: function(date, scale, step) {
var now = new Date();
var ago = now - date;
var divider;
switch (scale) {
case 'millisecond':
divider = 1;
break;
case 'second':
divider = 1000;
break;
case 'minute':
divider = 1000 * 60;
break;
case 'hour':
divider = 1000 * 60 * 60;
break;
case 'day':
divider = 1000 * 60 * 60 * 24;
break;
case 'weekday':
divider = 1000 * 60 * 60 * 24 * 7;
break;
case 'month':
divider = 1000 * 60 * 60 * 24 * 30;
break;
case 'year':
divider = 1000 * 60 * 60 * 24 * 365;
break;
default:
return new Date(date);
}
return (Math.round(ago * step / divider)) + " " + scale + "s ago"
},
majorLabels: function(date, scale, step) {
var now = new Date();
var ago = now - date;
var divider;
switch (scale) {
case 'millisecond':
divider = 1;
break;
case 'second':
divider = 1000;
break;
case 'minute':
divider = 1000 * 60;
break;
case 'hour':
divider = 1000 * 60 * 60;
break;
case 'day':
divider = 1000 * 60 * 60 * 24;
break;
case 'weekday':
divider = 1000 * 60 * 60 * 24 * 7;
break;
case 'month':
divider = 1000 * 60 * 60 * 24 * 30;
break;
case 'year':
divider = 1000 * 60 * 60 * 24 * 365;
break;
default:
return new Date(date);
}
return (Math.round(ago * step / divider)) + " " + scale + "s ago"
}
}
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
</script>
</body>
</html>

+ 8
- 0
lib/timeline/TimeStep.js View File

@ -532,6 +532,10 @@ TimeStep.prototype.getLabelMinor = function(date) {
date = this.current; date = this.current;
} }
if (typeof(this.format.minorLabels) === "function") {
return this.format.minorLabels(date, this.scale, this.step);
}
var format = this.format.minorLabels[this.scale]; var format = this.format.minorLabels[this.scale];
return (format && format.length > 0) ? this.moment(date).format(format) : ''; return (format && format.length > 0) ? this.moment(date).format(format) : '';
}; };
@ -546,6 +550,10 @@ TimeStep.prototype.getLabelMajor = function(date) {
if (date == undefined) { if (date == undefined) {
date = this.current; date = this.current;
} }
if (typeof(this.format.majorLabels) === "function") {
return this.format.majorLabels(date, this.scale, this.step);
}
var format = this.format.majorLabels[this.scale]; var format = this.format.majorLabels[this.scale];
return (format && format.length > 0) ? this.moment(date).format(format) : ''; return (format && format.length > 0) ? this.moment(date).format(format) : '';

+ 2
- 2
lib/timeline/component/Group.js View File

@ -180,6 +180,7 @@ Group.prototype.redraw = function(range, margin, restack) {
// recalculate the height of the subgroups // recalculate the height of the subgroups
this._calculateSubGroupHeights(); this._calculateSubGroupHeights();
this.isVisible = this._isGroupVisible(range, margin); this.isVisible = this._isGroupVisible(range, margin);
// reposition visible items vertically // reposition visible items vertically
@ -220,7 +221,7 @@ Group.prototype.redraw = function(range, margin, restack) {
stack.nostack(this.visibleItems, margin, this.subgroups); stack.nostack(this.visibleItems, margin, this.subgroups);
} }
} }
if (!this.isVisible && this.height) { if (!this.isVisible && this.height) {
return resized = false; return resized = false;
} }
@ -275,7 +276,6 @@ Group.prototype._calculateSubGroupHeights = function () {
* check if group is visible * check if group is visible
* @private * @private
*/ */
Group.prototype._isGroupVisible = function (range, margin) { Group.prototype._isGroupVisible = function (range, margin) {
var isVisible = var isVisible =
(this.top <= range.body.domProps.centerContainer.height - range.body.domProps.scrollTop + margin.axis) (this.top <= range.body.domProps.centerContainer.height - range.body.domProps.scrollTop + margin.axis)

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

@ -47,7 +47,7 @@ let allOptions = {
day: {string,'undefined': 'undefined'}, day: {string,'undefined': 'undefined'},
month: {string,'undefined': 'undefined'}, month: {string,'undefined': 'undefined'},
year: {string,'undefined': 'undefined'}, year: {string,'undefined': 'undefined'},
__type__: {object}
__type__: {object, 'function': 'function'}
}, },
majorLabels: { majorLabels: {
millisecond: {string,'undefined': 'undefined'}, millisecond: {string,'undefined': 'undefined'},
@ -58,7 +58,7 @@ let allOptions = {
day: {string,'undefined': 'undefined'}, day: {string,'undefined': 'undefined'},
month: {string,'undefined': 'undefined'}, month: {string,'undefined': 'undefined'},
year: {string,'undefined': 'undefined'}, year: {string,'undefined': 'undefined'},
__type__: {object}
__type__: {object, 'function': 'function'}
}, },
__type__: {object} __type__: {object}
}, },

Write Preview
Loading…
Cancel
Save