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

Added docs and example on background grid styling and some minor tweaks

v3_develop
jos 10 years ago
parent
ed9a41745a
commit
09ac576970
7 changed files with 136 additions and 10 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +61
    -0
      docs/timeline.html
  2. +53
    -0
      examples/timeline/32_grid_styling.html
  3. +1
    -0
      examples/timeline/index.html
  4. +2
    -2
      lib/timeline/TimeStep.js
  5. +9
    -7
      lib/timeline/component/TimeAxis.js
  6. +0
    -1
      lib/timeline/component/css/timeaxis.css
  7. +10
    -0
      test/timeline.html

+ 61
- 0
docs/timeline.html View File

@ -1344,6 +1344,67 @@ To load a locale into the Timeline not supported by default, one can add a new l
</style> </style>
</pre> </pre>
<h3 id="Grid_Backgrounds">Grid Backgrounds</h3>
<p>
The background grid of the time axis can be styled, for example to highlight
weekends or to create grids with an alternating white/lightgray background.
</p>
<p>
Depending on the zoom level, the grids get certain css classes attached.
The following classes are available:
</p>
<table>
<tr>
<th>Description</th><th>values</th>
</tr>
<tr>
<td>Alternating columns</td><td><code>even</code>, <code>odd</code></td>
</tr>
<tr>
<td>Current date</td><td><code>today</code>, <code>tomorrow</code>, <code>yesterday</code>, <code>current-week</code>, <code>current-month</code>, <code>current-year</code></td>
</tr>
<tr>
<td>Hours</td><td><code>0h</code>, <code>1h</code>, ..., <code>23h</code></td>
</tr>
<tr>
<td>Grouped hours</td><td><code>0-4h</code> to <code>20-24h</code></td>
</tr>
<tr>
<td>Weekday</td><td><code>monday</code>, <code>tuesday</code>, <code>wednesday</code>, <code>thursday</code>, <code>friday</code>, <code>saturday</code>, <code>sunday</code></td>
</tr>
<tr>
<td>Days</td><td><code>date1</code>, <code>date2</code>, ..., <code>date31</code></td>
</tr>
<tr>
<td>Months</td><td><code>januari</code>, <code>februari</code>, <code>march</code>, <code>april</code>, <code>may</code>, <code>june</code>, <code>july</code>, <code>august</code>, <code>september</code>, <code>october</code>, <code>november</code>, <code>december</code></td>
</tr>
<tr>
<td>Years</td><td><code>year2014</code>, <code>year2015</code>, ...</td>
</tr>
</table>
<p>Examples:</p>
<pre class="prettyprint lang-html">&lt;style&gt;
/* alternating column backgrounds */
.vis.timeline .timeaxis .grid.odd {
background: #f5f5f5;
}
/* gray background in weekends, white text color */
.vis.timeline .timeaxis .grid.saturday,
.vis.timeline .timeaxis .grid.sunday {
background: gray;
}
.vis.timeline .timeaxis .text.saturday,
.vis.timeline .timeaxis .text.sunday {
color: white;
}
&lt;/style&gt;
</pre>
<h2 id="Data_Policy">Data Policy</h2> <h2 id="Data_Policy">Data Policy</h2>
<p> <p>
All code and data is processed and rendered in the browser. All code and data is processed and rendered in the browser.

+ 53
- 0
examples/timeline/32_grid_styling.html View File

@ -0,0 +1,53 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Grid styling</title>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
/* alternating column backgrounds */
.vis.timeline .timeaxis .grid.odd {
background: #f5f5f5;
}
/* gray background in weekends, white text color */
.vis.timeline .timeaxis .grid.saturday,
.vis.timeline .timeaxis .grid.sunday {
background: gray;
}
.vis.timeline .timeaxis .text.saturday,
.vis.timeline .timeaxis .text.sunday {
color: white;
}
</style>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'custom', start: '2015-01-01'},
{id: 2, content: 'styling', start: '2016-01-01'},
{id: 3, content: 'of', start: '2017-01-01'},
{id: 4, content: 'background', start: '2018-01-01'},
{id: 5, content: 'grid', start: '2019-01-01'}
]);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 1
- 0
examples/timeline/index.html View File

@ -42,6 +42,7 @@
<p><a href="29_hiding_times.html">29_hiding_times.html</a></p> <p><a href="29_hiding_times.html">29_hiding_times.html</a></p>
<p><a href="30_subgroups.html">30_subgroups.html</a></p> <p><a href="30_subgroups.html">30_subgroups.html</a></p>
<p><a href="31_background_areas_with_groups.html">31_background_areas_with_groups.html</a></p> <p><a href="31_background_areas_with_groups.html">31_background_areas_with_groups.html</a></p>
<p><a href="32_grid_styling.html">32_grid_styling.html</a></p>
<p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p> <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>

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

@ -581,9 +581,9 @@ TimeStep.prototype.getClassName = function() {
today(date) + currentWeek(date) + even(date.date()); today(date) + currentWeek(date) + even(date.date());
case 'day': case 'day':
var d = date.date();
var day = date.date();
var month = date.format('MMMM').toLowerCase(); var month = date.format('MMMM').toLowerCase();
return 'date' + d + ' ' + month + currentMonth(date) + even(d - 1);
return 'day' + day + ' ' + month + currentMonth(date) + even(day - 1);
case 'month': case 'month':
return date.format('MMMM').toLowerCase() + return date.format('MMMM').toLowerCase() +

+ 9
- 7
lib/timeline/component/TimeAxis.js View File

@ -225,7 +225,7 @@ TimeAxis.prototype._repaintLabels = function () {
} }
if (this.options.showMinorLabels) { if (this.options.showMinorLabels) {
this._repaintMinorText(x, step.getLabelMinor(), orientation);
this._repaintMinorText(x, step.getLabelMinor(), orientation, className);
} }
if (isMajor && this.options.showMajorLabels) { if (isMajor && this.options.showMajorLabels) {
@ -233,7 +233,7 @@ TimeAxis.prototype._repaintLabels = function () {
if (xFirstMajorLabel == undefined) { if (xFirstMajorLabel == undefined) {
xFirstMajorLabel = x; xFirstMajorLabel = x;
} }
this._repaintMajorText(x, step.getLabelMajor(), orientation);
this._repaintMajorText(x, step.getLabelMajor(), orientation, className);
} }
if (this.options.showMajorLines == true) { if (this.options.showMajorLines == true) {
prevLine = this._repaintMajorLine(x, orientation, className); prevLine = this._repaintMajorLine(x, orientation, className);
@ -253,7 +253,7 @@ TimeAxis.prototype._repaintLabels = function () {
widthText = leftText.length * (this.props.majorCharWidth || 10) + 10; // upper bound estimation widthText = leftText.length * (this.props.majorCharWidth || 10) + 10; // upper bound estimation
if (xFirstMajorLabel == undefined || widthText < xFirstMajorLabel) { if (xFirstMajorLabel == undefined || widthText < xFirstMajorLabel) {
this._repaintMajorText(0, leftText, orientation);
this._repaintMajorText(0, leftText, orientation, className);
} }
} }
@ -273,9 +273,10 @@ TimeAxis.prototype._repaintLabels = function () {
* @param {Number} x * @param {Number} x
* @param {String} text * @param {String} text
* @param {String} orientation "top" or "bottom" (default) * @param {String} orientation "top" or "bottom" (default)
* @param {String} className
* @private * @private
*/ */
TimeAxis.prototype._repaintMinorText = function (x, text, orientation) {
TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className) {
// reuse redundant label // reuse redundant label
var label = this.dom.redundant.minorTexts.shift(); var label = this.dom.redundant.minorTexts.shift();
@ -284,7 +285,6 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation) {
var content = document.createTextNode(''); var content = document.createTextNode('');
label = document.createElement('div'); label = document.createElement('div');
label.appendChild(content); label.appendChild(content);
label.className = 'text minor';
this.dom.foreground.appendChild(label); this.dom.foreground.appendChild(label);
} }
this.dom.minorTexts.push(label); this.dom.minorTexts.push(label);
@ -293,6 +293,7 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation) {
label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0'; label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0';
label.style.left = x + 'px'; label.style.left = x + 'px';
label.className = 'text minor ' + className;
//label.title = title; // TODO: this is a heavy operation //label.title = title; // TODO: this is a heavy operation
}; };
@ -301,9 +302,10 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation) {
* @param {Number} x * @param {Number} x
* @param {String} text * @param {String} text
* @param {String} orientation "top" or "bottom" (default) * @param {String} orientation "top" or "bottom" (default)
* @param {String} className
* @private * @private
*/ */
TimeAxis.prototype._repaintMajorText = function (x, text, orientation) {
TimeAxis.prototype._repaintMajorText = function (x, text, orientation, className) {
// reuse redundant label // reuse redundant label
var label = this.dom.redundant.majorTexts.shift(); var label = this.dom.redundant.majorTexts.shift();
@ -311,13 +313,13 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation) {
// create label // create label
var content = document.createTextNode(text); var content = document.createTextNode(text);
label = document.createElement('div'); label = document.createElement('div');
label.className = 'text major';
label.appendChild(content); label.appendChild(content);
this.dom.foreground.appendChild(label); this.dom.foreground.appendChild(label);
} }
this.dom.majorTexts.push(label); this.dom.majorTexts.push(label);
label.childNodes[0].nodeValue = text; label.childNodes[0].nodeValue = text;
label.className = 'text major ' + className;
//label.title = title; // TODO: this is a heavy operation //label.title = title; // TODO: this is a heavy operation
label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight + 'px'); label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight + 'px');

+ 0
- 1
lib/timeline/component/css/timeaxis.css View File

@ -35,7 +35,6 @@
.vis.timeline .timeaxis .grid.vertical { .vis.timeline .timeaxis .grid.vertical {
position: absolute; position: absolute;
width: 0;
border-left: 1px solid; border-left: 1px solid;
} }

+ 10
- 0
test/timeline.html View File

@ -23,6 +23,16 @@
#visualization .grid.vertical.odd { #visualization .grid.vertical.odd {
background: #f5f5f5; background: #f5f5f5;
} }
#visualization .grid.vertical.saturday,
#visualization .grid.vertical.sunday {
background: gray;
}
#visualization .text.saturday,
#visualization .text.sunday {
color: white;
}
</style> </style>
</head> </head>

Write Preview
Loading…
Cancel
Save