Browse Source

Index page updated

gh-pages
josdejong 11 years ago
parent
commit
2914715858
3 changed files with 139 additions and 12 deletions
  1. +5
    -5
      css/style.css
  2. +32
    -7
      index.html
  3. +102
    -0
      updateversion.js

+ 5
- 5
css/style.css View File

@ -32,7 +32,6 @@ div.nav ul li {
text-transform: uppercase;
font-weight: normal;
font-size: 11pt;
color: #2B7CE9;
list-style: none;
margin-top: 5px;
@ -48,12 +47,13 @@ div.nav ul li ul li {
list-style: none;
}
a.nav {
color: #4D4D4D;
div.nav a {
color: #2B7CE9;
}
a.nav:hover {
color: #2B7CE9;
.download td {
border: none;
padding: 5px 20px 5px 0;
}
.gallery .thumb {

+ 32
- 7
index.html View File

@ -50,30 +50,45 @@
<h2 id="install">Install</h2>
<h3>npm</h3>
Install via npm:
<pre class="prettyprint">
npm install vis
</pre>
<h3>bower</h3>
Install via bower:
<pre class="prettyprint">
bower install vis
</pre>
<h3>download</h3>
Or download the library from the github project:
<a href="https://github.com/almende/vis.git" target="_blank">https://github.com/almende/vis.git</a>.
<table class="download">
<tr>
<td>
<a href="vis.js" target="_blank">Development
(version <span class="version">0.0.9</span>)</a>
</td>
<td>
<span id="development-size">372 kB</span>, uncompressed with comments
</td>
</tr>
<tr>
<td>
<a href="vis.min.js" target="_blank">Production
(version <span class="version">0.0.9</span>)</a>
</td>
<td>
<span id="production-size">33 kB</span>, minified and gzipped
</td>
</tr>
</table>
<h2 id="example">Example</h2>
<p>
A basic example demonstrating how to use the vis.js timeline is shown below.
</p>
<p>
More examples can be found in the
<a href="examples" target="_blank">examples directory</a>.
</p>
@ -112,8 +127,14 @@ bower install vis
<h2 id="gallery">Gallery</h2>
This gallery gives an idea of the features and possibilities of the library.
The source code of the examples can be found in the
<a href="https://github.com/almende/vis/tree/master/examples" target="_blank">examples directory</a>.
<h3 id="timeline">Timeline</h3>
<p>
The timeline from vis.js displays different types of data on a timeline.
</p>
<div class="gallery">
<div class="thumb">
<a href="examples/timeline/01_basic.html">
@ -148,6 +169,10 @@ bower install vis
</div>
<h3 id="graph">Graph</h3>
<p>
The graph from vis.js visualizes graphs and networks with
customizable styles.
</p>
<div class="gallery">
<div class="thumb">

+ 102
- 0
updateversion.js View File

@ -0,0 +1,102 @@
// Update the version numbers and library sizes in index.md
var fs = require('fs'),
zlib = require('zlib');
var VIS = 'vis.js',
VIS_MIN = 'vis.min.js',
INDEX = 'index.html';
// get development size
function developmentSize(callback) {
fs.readFile(VIS, function (err, data) {
if (!err) {
var size = Math.round(data.length / 1024) + ' kB';
callback(null, size);
}
else {
callback(err);
}
});
}
// get (gzipped) production size
function productionSize(callback) {
fs.readFile(VIS_MIN, function (err, data) {
if (!err) {
zlib.gzip(data, function (err, data) {
if (!err) {
var size = Math.round(data.length / 1024) + ' kB';
callback(null, size)
}
else {
callback(err);
}
});
}
else {
callback(err);
}
});
}
// get version
function version(callback) {
fs.readFile(VIS_MIN, function (err, data) {
if (!err) {
var match = /@version\s*([\w\.-]*)/i.exec(data);
var version = undefined;
if (match) {
version = match[1];
}
callback(null, version);
}
else {
callback(err);
}
});
}
// update version and library sizes in index.md
function updateVersion(developmentSize, productionSize, version, callback) {
fs.readFile(INDEX, function (err, data) {
if (!err) {
data = String(data);
data = data.replace(/<span id="development-size">([\w\s]*)<\/span>/g,
'<span id="development-size">' + developmentSize + '</span>');
data = data.replace(/<span id="production-size">([\w\s]*)<\/span>/g,
'<span id="production-size">' + productionSize + '</span>');
data = data.replace(/<span class="version">([\w\.-]*)<\/span>/g,
'<span class="version">' + version + '</span>');
fs.writeFile(INDEX, data, callback);
}
else {
callback(err);
}
});
}
developmentSize(function (err, devSize) {
console.log('development size: ' + devSize);
productionSize(function (err, prodSize) {
console.log('production size: ' + prodSize);
version(function (err, version) {
console.log('version: ' + version);
if (devSize && prodSize && version) {
updateVersion(devSize, prodSize, version, function (err, res) {
if (err) {
console.log(err);
}
else {
console.log('done');
}
});
}
else {
}
});
});
});

Loading…
Cancel
Save