Browse Source

Implemented localization in Timeline and Graph2d

v3_develop
jos 9 years ago
parent
commit
26ca73dff5
12 changed files with 369 additions and 37 deletions
  1. +2
    -1
      HISTORY.md
  2. +70
    -12
      docs/graph2d.html
  3. +72
    -2
      docs/timeline.html
  4. +16
    -16
      examples/graph2d/01_basic.html
  5. +65
    -0
      examples/graph2d/13_localization.html
  6. +1
    -0
      examples/graph2d/index.html
  7. +65
    -0
      examples/timeline/19_localization.html
  8. +1
    -0
      examples/timeline/index.html
  9. +12
    -3
      lib/timeline/component/CurrentTime.js
  10. +11
    -3
      lib/timeline/component/CustomTime.js
  11. +13
    -0
      lib/timeline/component/TimeAxis.js
  12. +41
    -0
      lib/timeline/locales.js

+ 2
- 1
HISTORY.md View File

@ -9,6 +9,7 @@ http://visjs.org
- Fixed the `change` event sometimes being fired twice on IE10.
- Fixed canceling moving an item to another group did not move the item
back to the original group.
- Added localization support.
### Network
@ -21,7 +22,7 @@ http://visjs.org
- Added 'allowOverlap' option for barCharts.
- Added two examples showing the two additions above.
- Added 'customRange' for the Y axis and an example showing how it works.
- Added localization support.
## 2014-08-14, version 3.2.0

+ 70
- 12
docs/graph2d.html View File

@ -48,6 +48,8 @@
</li>
<li><a href="#Methods">Methods</a></li>
<li><a href="#Events">Events</a></li>
<li><a href="#Localization">Localization</a></li>
<li><a href="#Styles">Styles</a></li>
<li><a href="#Data_Policy">Data Policy</a></li>
</ul>
@ -91,7 +93,7 @@
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, dataset, options);
var Graph2d = new vis.Graph2d(container, dataset, options);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
@ -278,13 +280,13 @@ groups.add({
<td>slots.slot</td>
<td>Number</td>
<td></td>
<td>The slot the bar chart is plotted in. This has to be used in combination with slots.total. See <a href="../examples/graph2d/11_barsSideBySideGroups.html">example 11</a> for more information.</td>
<td>The slot the bar chart is plotted in. This has to be used in combination with slots.total. See <a href="../examples/Graph2d/11_barsSideBySideGroups.html">example 11</a> for more information.</td>
</tr>
<tr>
<td>slots.total</td>
<td>Number</td>
<td></td>
<td>The total amount of slots available. This has to be used in combination with slots.slot. See <a href="../examples/graph2d/11_barsSideBySideGroups.html">example 11</a> for more information.</td>
<td>The total amount of slots available. This has to be used in combination with slots.slot. See <a href="../examples/Graph2d/11_barsSideBySideGroups.html">example 11</a> for more information.</td>
</tr>
</table>
@ -316,7 +318,7 @@ The options colored in green can also be used as options for the groups. All opt
<td class="greenField">yAxisOrientation</td>
<td>String</td>
<td>'left'</td>
<td>This defines with which axis, left or right, the graph is coupled. <a href="../examples/graph2d/05_bothAxis.html">Example 5</a> shows groups with different Y axis. If no groups are coupled
<td>This defines with which axis, left or right, the graph is coupled. <a href="../examples/Graph2d/05_bothAxis.html">Example 5</a> shows groups with different Y axis. If no groups are coupled
with an axis, it will not be shown.</td>
</tr>
<tr>
@ -336,7 +338,7 @@ The options colored in green can also be used as options for the groups. All opt
<td class="greenField">sampling</td>
<td>Boolean</td>
<td>true</td>
<td>If sampling is enabled, graph2D will automatically determine the amount of points per pixel.
<td>If sampling is enabled, Graph2d will automatically determine the amount of points per pixel.
If there are more than 1 point per pixel, not all points will be drawn. Disabling sampling will cause a decrease in performance.</td>
</tr>
<tr>
@ -388,8 +390,8 @@ The options colored in green can also be used as options for the groups. All opt
<td>Boolean</td>
<td>true</td>
<td>When true, bars that have the same x coordinate are plotted on top of eachother (not stacking).
See <a href="../examples/graph2d/10_barsSideBySide.html">example 10</a> for more information.
When using groups, see <a href="../examples/graph2d/11_barsSideBySideGroups.html">example 11</a>.
See <a href="../examples/Graph2d/10_barsSideBySide.html">example 10</a> for more information.
When using groups, see <a href="../examples/Graph2d/11_barsSideBySideGroups.html">example 11</a>.
</td>
</tr>
<tr>
@ -408,7 +410,7 @@ The options colored in green can also be used as options for the groups. All opt
<td class="greenField">catmullRom.parametrization</td>
<td>String</td>
<td>'centripetal'</td>
<td>Define the type of parametrizaion. <a href="../examples/graph2d/07_scrollingAndSorting.html">Example 7</a> shows the different methods. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant.
<td>Define the type of parametrizaion. <a href="../examples/Graph2d/07_scrollingAndSorting.html">Example 7</a> shows the different methods. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant.
If catmullRom is disabled, linear interpolation is used.</td>
</tr>
<tr>
@ -512,7 +514,7 @@ The options colored in green can also be used as options for the groups. All opt
<h3 id="timelineOptions">Timeline Options</h3>
<p>
Graph2d is built upon the framework of the timeline. These options from the timeline can be used with graph2D.
Graph2d is built upon the framework of the timeline. These options from the timeline can be used with Graph2d.
All options are optional.
</p>
@ -917,16 +919,72 @@ Graph2d.off('rangechanged', onChange);
</table>
<h2 id="Localization">Localization</h2>
<p>
Graph2d can be localized. For localization, Graph2d depends largely on the localization of <a href="http://momentjs.com">moment.js</a>. Locales are not included in vis.js by default. To enable localization, moment.js must be loaded with locales. Moment.js offers a bundle named "moment-with-locales.min.js" for this and there are various alternative ways to load locales.
</p>
<p>
To set a locale for the Graph2d, specify the option <code>locale</code>:
</p>
<pre class="prettyprint lang-js">var options = {
locale: 'nl'
};
</pre>
<h3>Create a new locale</h3>
To load a locale into the Graph2d not supported by default, one can add a new locale to the option <code>locales</code>:
<pre class="prettyprint lang-js">var options = {
locales: {
// create a new locale
mylocale: {
current: 'current',
time: 'time',
}
},
// use the new locale
locale: 'mylocale'
};
</pre>
<h3 id="available-locales">Available locales</h3>
Graph2d comes with support for the following locales:
<table>
<tr><th>Language</th><th>Code</th></tr>
<tr>
<td>English</td>
<td>
<code>en</code><br>
<code>en_EN</code><br>
<code>en_US</code>
</td>
</tr>
<tr>
<td>Dutch</td>
<td>
<code>nl</code><br>
<code>nl_NL</code><br>
<code>nl_BE</code>
</td>
</tr>
</table>
<h2 id="Styles">Styles</h2>
<p>
All parts of the Graph2d have a class name and a default css style just like the Timeline.
All parts of the Graph2d have a class name and a default css style just like the Graph2d.
The styles can be overwritten, which enables full customization of the layout
of the Graph2d.
</p>
<p>
Additionally, Graph2d has 10 preset styles for graphs, which are cycled through when loading groups. These styles can be overwritten
as well, along with defining your own classes to style the graphs! <a href="../examples/graph2d/04_rightAxis.html">Example 4</a> and
<a href="../examples/graph2d/05_bothAxis.html">example 5</a> show the usage of custom styles.
as well, along with defining your own classes to style the graphs! <a href="../examples/Graph2d/04_rightAxis.html">Example 4</a> and
<a href="../examples/Graph2d/05_bothAxis.html">example 5</a> show the usage of custom styles.
</p>
<h2 id="Data_Policy">Data Policy</h2>

+ 72
- 2
docs/timeline.html View File

@ -43,6 +43,7 @@
<li><a href="#Methods">Methods</a></li>
<li><a href="#Events">Events</a></li>
<li><a href="#Editing_Items">Editing Items</a></li>
<li><a href="#Localization">Localization</a></li>
<li><a href="#Styles">Styles</a></li>
<li><a href="#Data_Policy">Data Policy</a></li>
</ul>
@ -438,6 +439,20 @@ var options = {
</td>
</tr>
<tr>
<td>locale</td>
<td>String</td>
<td>none</td>
<td>Select a locale for the Timeline. See section <a>Localization</a> for more information.</td>
</tr>
<tr>
<td>locales</td>
<td>Object</td>
<td>none</td>
<td>A map with i18n locales. See section <a>Localization</a> for more information.</td>
</tr>
<tr>
<td>margin.axis</td>
<td>Number</td>
@ -985,11 +1000,67 @@ var options = {
callback(null); // cancel updating the item
}
}
}
};
</pre>
A full example is available here: <a href="../examples/timeline/08_edit_items.html">08_edit_items.html</a>.
<h2 id="Localization">Localization</h2>
<p>
Timeline can be localized. For localization, Timeline depends largely on the localization of <a href="http://momentjs.com">moment.js</a>. Locales are not included in vis.js by default. To enable localization, moment.js must be loaded with locales. Moment.js offers a bundle named "moment-with-locales.min.js" for this and there are various alternative ways to load locales.
</p>
<p>
To set a locale for the Timeline, specify the option <code>locale</code>:
</p>
<pre class="prettyprint lang-js">var options = {
locale: 'nl'
};
</pre>
<h3>Create a new locale</h3>
To load a locale into the Timeline not supported by default, one can add a new locale to the option <code>locales</code>:
<pre class="prettyprint lang-js">var options = {
locales: {
// create a new locale
mylocale: {
current: 'current',
time: 'time',
}
},
// use the new locale
locale: 'mylocale'
};
</pre>
<h3 id="available-locales">Available locales</h3>
Timeline comes with support for the following locales:
<table>
<tr><th>Language</th><th>Code</th></tr>
<tr>
<td>English</td>
<td>
<code>en</code><br>
<code>en_EN</code><br>
<code>en_US</code>
</td>
</tr>
<tr>
<td>Dutch</td>
<td>
<code>nl</code><br>
<code>nl_NL</code><br>
<code>nl_BE</code>
</td>
</tr>
</table>
<h2 id="Styles">Styles</h2>
<p>
@ -1008,7 +1079,6 @@ A full example is available here: &lt;/style&gt;
</pre>
<h2 id="Data_Policy">Data Policy</h2>
<p>
All code and data is processed and rendered in the browser.

+ 16
- 16
examples/graph2d/01_basic.html View File

@ -2,8 +2,8 @@
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Graph2d | Basic Example</title>
<style type="text/css">
@ -18,13 +18,13 @@
<body>
<h2>Graph2d | Basic Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the most basic functionality of the vis.js Graph2d module. An array or a vis.Dataset can be used as input.
In the following examples we'll explore the options Graph2d offest for customization. This example uses all default settings.
There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can
create your own styling.
<br /><br />
This example shows the most basic functionality of the vis.js Graph2d module. An array or a vis.Dataset can be used as input.
In the following examples we'll explore the options Graph2d offest for customization. This example uses all default settings.
There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can
create your own styling.
<br /><br />
Graph2d is built upon the framework of the newly refactored timeline. A lot of the timeline options will also apply to Graph2d.
In these examples however, we will focus on what's new in Graph2d!
In these examples however, we will focus on what's new in Graph2d!
</div>
<br />
<div id="visualization"></div>
@ -33,18 +33,18 @@
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
];
var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18'
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, dataset, options);

+ 65
- 0
examples/graph2d/13_localization.html View File

@ -0,0 +1,65 @@
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Graph2d | Localization</title>
<style type="text/css">
body, html, select {
font-family: sans-serif;
font-size: 11pt;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment-with-langs.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Localization</h2>
<p>
To localize Graph2d, one has to load a version of moment.js including locales. To set a locale, specify option <code>{locale: STRING}</code>.
</p>
<p>
<label for="locale">Select a locale:</label>
<select id="locale">
<option value="en" selected>en</option>
<option value="nl">nl</option>
</select>
</p>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
];
var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18'
};
var graph2d = new vis.Graph2d(container, dataset, options);
// update the locale when changing the select box value
var select = document.getElementById('locale');
select.onchange = function () {
graph2d.setOptions({
locale: this.value
});
};
select.onchange();
</script>
</body>
</html>

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

@ -19,6 +19,7 @@
<p><a href="10_barsSideBySide.html">10_barsSideBySide.html</a></p>
<p><a href="11_barsSideBySideGroups.html">11_barsSideBySideGroups.html</a></p>
<p><a href="12_customRange.html">12_customRange.html</a></p>
<p><a href="13_localization.html">13_localization.html</a></p>
</div>
</body>

+ 65
- 0
examples/timeline/19_localization.html View File

@ -0,0 +1,65 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Localization</title>
<style type="text/css">
body, html, select {
font-family: sans-serif;
font-size: 11pt;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment-with-langs.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
To localize the Timeline, one has to load a version of moment.js including locales. To set a locale, specify option <code>{locale: STRING}</code>.
</p>
<p>
<label for="locale">Select a locale:</label>
<select id="locale">
<option value="en" selected>en</option>
<option value="nl">nl</option>
</select>
</p>
<div id="visualization"></div>
<script type="text/javascript">
var DAY = 24 * 60 * 60 * 1000;
// 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: 'item 1', start: new Date(new Date().valueOf() - DAY)},
{id: 2, content: 'item 2', start: new Date(new Date().valueOf() + 2 * DAY)}
]);
// Configuration for the Timeline
var options = {
showCurrentTime: true,
showCustomTime: true
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
timeline.setCustomTime(new Date(new Date().valueOf() + DAY));
// update the locale when changing the select box value
var select = document.getElementById('locale');
select.onchange = function () {
timeline.setOptions({
locale: this.value
});
};
select.onchange();
</script>
</body>
</html>

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

@ -30,6 +30,7 @@
<p><a href="16_navigation_menu.html">16_navigation_menu.html</a></p>
<p><a href="17_data_serialization.html">17_data_serialization.html</a></p>
<p><a href="18_range_overflow.html">18_range_overflow.html</a></p>
<p><a href="19_localization.html">19_localization.html</a></p>
<p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>

+ 12
- 3
lib/timeline/component/CurrentTime.js View File

@ -1,5 +1,7 @@
var util = require('../../util');
var Component = require('./Component');
var moment = require('../../module/moment');
var locales = require('../locales');
/**
* A current time bar
@ -14,7 +16,10 @@ function CurrentTime (body, options) {
// default options
this.defaultOptions = {
showCurrentTime: true
showCurrentTime: true,
locales: locales,
locale: 'en'
};
this.options = util.extend({}, this.defaultOptions);
@ -57,7 +62,7 @@ CurrentTime.prototype.destroy = function () {
CurrentTime.prototype.setOptions = function(options) {
if (options) {
// copy all options that we know
util.selectiveExtend(['showCurrentTime'], this.options, options);
util.selectiveExtend(['showCurrentTime', 'locale', 'locales'], this.options, options);
}
};
@ -81,8 +86,12 @@ CurrentTime.prototype.redraw = function() {
var now = new Date();
var x = this.body.util.toScreen(now);
var locale = this.options.locales[this.options.locale];
var title = locale.current + ' ' + locale.time + ': ' + moment(now).format('dddd, MMMM Do YYYY, H:mm:ss');
title = title.charAt(0).toUpperCase() + title.substring(1);
this.bar.style.left = x + 'px';
this.bar.title = 'Current time: ' + now;
this.bar.title = title;
}
else {
// remove the line from the DOM

+ 11
- 3
lib/timeline/component/CustomTime.js View File

@ -1,6 +1,8 @@
var Hammer = require('../../module/hammer');
var util = require('../../util');
var Component = require('./Component');
var moment = require('../../module/moment');
var locales = require('../locales');
/**
* A custom time bar
@ -16,7 +18,9 @@ function CustomTime (body, options) {
// default options
this.defaultOptions = {
showCustomTime: false
showCustomTime: false,
locales: locales,
locale: 'en'
};
this.options = util.extend({}, this.defaultOptions);
@ -39,7 +43,7 @@ CustomTime.prototype = new Component();
CustomTime.prototype.setOptions = function(options) {
if (options) {
// copy all options that we know
util.selectiveExtend(['showCustomTime'], this.options, options);
util.selectiveExtend(['showCustomTime', 'locale', 'locales'], this.options, options);
}
};
@ -102,8 +106,12 @@ CustomTime.prototype.redraw = function () {
var x = this.body.util.toScreen(this.customTime);
var locale = this.options.locales[this.options.locale];
var title = locale.time + ': ' + moment(this.customTime).format('dddd, MMMM Do YYYY, H:mm:ss');
title = title.charAt(0).toUpperCase() + title.substring(1);
this.bar.style.left = x + 'px';
this.bar.title = 'Time: ' + this.customTime;
this.bar.title = title;
}
else {
// remove the line from the DOM

+ 13
- 0
lib/timeline/component/TimeAxis.js View File

@ -1,6 +1,7 @@
var util = require('../../util');
var Component = require('./Component');
var TimeStep = require('../TimeStep');
var moment = require('../../module/moment');
/**
* A horizontal time axis
@ -63,6 +64,18 @@ TimeAxis.prototype.setOptions = function(options) {
if (options) {
// copy all options that we know
util.selectiveExtend(['orientation', 'showMinorLabels', 'showMajorLabels'], this.options, options);
// apply locale to moment.js
// TODO: not so nice, this is applied globally to moment.js
if ('locale' in options) {
if (typeof moment.locale === 'function') {
// moment.js 2.8.1+
moment.locale(options.locale);
}
else {
moment.lang(options.locale);
}
}
}
};

+ 41
- 0
lib/timeline/locales.js View File

@ -0,0 +1,41 @@
// English
exports['en'] = {
// Timeline
current: 'current',
time: 'time',
// Network
add: 'Add Node',
edit: 'Edit',
link: 'Add Link',
del: 'Delete selected',
editNode: 'Edit Node',
editEdge: 'Edit Edge',
back: 'Back',
addDescription: 'Click in an empty space to place a new node.',
linkDescription: 'Click on a node and drag the edge to another node to connect them.',
editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.'
};
exports['en_EN'] = exports['en'];
exports['en_US'] = exports['en'];
// Dutch
exports['nl'] = {
// Timeline
custom: 'aangepaste',
time: 'tijd',
// Network
add: 'Node',
edit: 'Wijzigen',
link: 'Link toevoegen',
del: 'Selectie verwijderen',
editNode: 'Node wijzigen',
editEdge: 'Link wijzigen',
back: 'Terug',
addDescription: 'Klik op een leeg gebied om een nieuwe node te maken.',
linkDescription: 'Klik op een node en sleep de link naar een andere node om ze te verbinden.',
editEdgeDescription: 'Klik op de verbindingspunten en sleep ze naar een node om daarmee te verbinden.'
};
exports['nl_NL'] = exports['nl'];
exports['nl_BE'] = exports['nl'];

Loading…
Cancel
Save