[#65,refactor][s]: move demo to app and rework mains docs to reflect app / library distinction.
This commit is contained in:
Rufus Pollock
56
app/built.html
Normal file
56
app/built.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Recline Data Explorer Demo</title>
|
||||
<meta name="description" content="A demo of the Recline Data Explorer">
|
||||
<meta name="author" content="Rufus Pollock and Max Ogden">
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap.css">
|
||||
<link rel="stylesheet" href="../css/data-explorer.css">
|
||||
<link rel="stylesheet" href="../css/graph-flot.css">
|
||||
<link rel="stylesheet" href="style/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../vendor/jquery-1.7.1.js"></script>
|
||||
<script type="text/javascript" src="../vendor/underscore-1.1.6.js"></script>
|
||||
<script type="text/javascript" src="../vendor/backbone-0.5.1.js"></script>
|
||||
<script type="text/javascript" src="../vendor/jquery-ui-1.8.14.custom.min.js"></script>
|
||||
<script type="text/javascript" src="../vendor/jquery.flot-0.7.js"></script>
|
||||
<script type="text/javascript" src="../vendor/jquery.mustache.js"></script>
|
||||
<script type="text/javascript" src="../vendor/bootstrap/2.0.2/bootstrap.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../recline.js"></script>
|
||||
<script type="text/javascript" src="js/app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container-fluid">
|
||||
<a class="brand" href="#">Recline Data Explorer</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><a class="set-read-only" title="Put into read-only mode">Read-only</a></li>
|
||||
</ul>
|
||||
<form class="webstore-load pull-right navbar-search" title="Update from the specified webstore dataset">
|
||||
<input type="text" name="source" size="50" />
|
||||
<select name="backend_type">
|
||||
<option value="elasticsearch">ElasticSearch</option>
|
||||
<option value="dataproxy">DataProxy</option>
|
||||
<option value="gdocs">Google Spreadsheets</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="content">
|
||||
<div class="data-explorer-here"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
app/images/bg_gradient.gif
Executable file
BIN
app/images/bg_gradient.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 87 B |
BIN
app/images/couch.png
Executable file
BIN
app/images/couch.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
app/images/large-spinner.gif
Executable file
BIN
app/images/large-spinner.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
132
app/index.html
Normal file
132
app/index.html
Normal file
@@ -0,0 +1,132 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Recline Data Explorer</title>
|
||||
<meta name="description" content="The Recline Data Explorer">
|
||||
<meta name="author" content="Rufus Pollock and Max Ogden">
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap.css">
|
||||
<link rel="stylesheet" href="../css/data-explorer.css">
|
||||
<link rel="stylesheet" href="../css/graph-flot.css">
|
||||
<link rel="stylesheet" href="style/demo.css">
|
||||
<link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap-responsive.css">
|
||||
|
||||
<!-- 3rd party libraries -->
|
||||
<script type="text/javascript" src="../vendor/jquery-1.7.1.js"></script>
|
||||
<script type="text/javascript" src="../vendor/underscore-1.1.6.js"></script>
|
||||
<script type="text/javascript" src="../vendor/backbone-0.5.1.js"></script>
|
||||
<script type="text/javascript" src="../vendor/jquery-ui-1.8.14.custom.min.js"></script>
|
||||
<script type="text/javascript" src="../vendor/jquery.flot-0.7.js"></script>
|
||||
<script type="text/javascript" src="../vendor/jquery.mustache.js"></script>
|
||||
<script type="text/javascript" src="../vendor/bootstrap/2.0.2/bootstrap.js"></script>
|
||||
|
||||
<!-- recline library -->
|
||||
<!-- in normal use would just the single recline.js library file. However, for testing it
|
||||
is easier to reference individual files. See built.html for example using just recline.js -->
|
||||
<script type="text/javascript" src="../src/util.js"></script>
|
||||
<script type="text/javascript" src="../src/costco.js"></script>
|
||||
<script type="text/javascript" src="../src/model.js"></script>
|
||||
<script type="text/javascript" src="../src/backend/base.js"></script>
|
||||
<script type="text/javascript" src="../src/backend/memory.js"></script>
|
||||
<script type="text/javascript" src="../src/backend/dataproxy.js"></script>
|
||||
<script type="text/javascript" src="../src/backend/elasticsearch.js"></script>
|
||||
<script type="text/javascript" src="../src/backend/gdocs.js"></script>
|
||||
<script type="text/javascript" src="../src/backend/localcsv.js"></script>
|
||||
<script type="text/javascript" src="../src/view.js"></script>
|
||||
<script type="text/javascript" src="../src/view-grid.js"></script>
|
||||
<script type="text/javascript" src="../src/view-flot-graph.js"></script>
|
||||
<script type="text/javascript" src="../src/view-transform-dialog.js"></script>
|
||||
|
||||
<!-- non-library javascript specific to this demo -->
|
||||
<script type="text/javascript" src="js/app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container-fluid">
|
||||
<a class="brand" href="../">Recline Data Explorer</a>
|
||||
<ul class="nav">
|
||||
<li><a href="../#docs">Documentation</a></li>
|
||||
</ul>
|
||||
<ul class="nav pull-right">
|
||||
<li class="dropdown">
|
||||
<a data-toggle="dropdown" class="dropdown-toggle">
|
||||
Import <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu js-import">
|
||||
<li>
|
||||
<a data-toggle="modal" href=".js-import-dialog-url">Import from URL</a>
|
||||
</li>
|
||||
<li>
|
||||
<a data-toggle="modal" href=".js-import-dialog-file">Import from File</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a class="set-read-only" title="Put into read-only mode">Read-only</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade in js-import-dialog-url" style="display: none;">
|
||||
<div class="modal-header">
|
||||
<a class="close" data-dismiss="modal">×</a>
|
||||
<h3>Import from URL</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="js-import-url form-horizontal">
|
||||
<div class="control-group">
|
||||
<label class="control-label">URL</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="source" class="input-xlarge" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label">Type of data</label>
|
||||
<div class="controls">
|
||||
<select name="backend_type">
|
||||
<option value="elasticsearch">ElasticSearch</option>
|
||||
<option value="dataproxy">CSV or Excel</option>
|
||||
<option value="gdocs">Google Spreadsheet</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Import »</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade in js-import-dialog-file" style="display: none;">
|
||||
<div class="modal-header">
|
||||
<a class="close" data-dismiss="modal">×</a>
|
||||
<h3>Import from File</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal">
|
||||
<div class="control-group">
|
||||
<label class="control-label">File</label>
|
||||
<div class="controls">
|
||||
<input type="file" name="source" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Import »</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="content">
|
||||
<div class="data-explorer-here"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
133
app/js/app.js
Executable file
133
app/js/app.js
Executable file
@@ -0,0 +1,133 @@
|
||||
$(function() {
|
||||
var qs = recline.View.parseQueryString(window.location.search);
|
||||
if (qs.url) {
|
||||
var dataset = new recline.Model.Dataset({
|
||||
id: 'my-dataset',
|
||||
url: qs.url,
|
||||
webstore_url: qs.url
|
||||
},
|
||||
qs.backend || 'elasticsearch'
|
||||
);
|
||||
} else {
|
||||
dataset = localDataset();
|
||||
}
|
||||
|
||||
createExplorer(dataset);
|
||||
Backbone.history.start();
|
||||
|
||||
// setup the loader menu in top bar
|
||||
setupLoader(createExplorer);
|
||||
|
||||
// set up readonly enabling in top bar
|
||||
$('a.set-read-only').click(function() {
|
||||
window.dataExplorer.setReadOnly();
|
||||
alert('Read-only mode set');
|
||||
});
|
||||
});
|
||||
|
||||
// make Explorer creation / initialization in a function so we can call it
|
||||
// again and again
|
||||
function createExplorer(dataset) {
|
||||
// remove existing data explorer view
|
||||
var reload = false;
|
||||
if (window.dataExplorer) {
|
||||
window.dataExplorer.remove();
|
||||
reload = true;
|
||||
}
|
||||
window.dataExplorer = null;
|
||||
var $el = $('<div />');
|
||||
$el.appendTo($('.data-explorer-here'));
|
||||
var views = standardViews(dataset);
|
||||
window.dataExplorer = new recline.View.DataExplorer({
|
||||
el: $el
|
||||
, model: dataset
|
||||
, views: views
|
||||
});
|
||||
// HACK (a bit). Issue is that Backbone will not trigger the route
|
||||
// if you are already at that location so we have to make sure we genuinely switch
|
||||
if (reload) {
|
||||
window.dataExplorer.router.navigate('graph');
|
||||
window.dataExplorer.router.navigate('', true);
|
||||
}
|
||||
}
|
||||
|
||||
// convenience function
|
||||
function standardViews(dataset) {
|
||||
var views = [
|
||||
{
|
||||
id: 'grid',
|
||||
label: 'Grid',
|
||||
view: new recline.View.DataGrid({
|
||||
model: dataset
|
||||
})
|
||||
},
|
||||
{
|
||||
id: 'graph',
|
||||
label: 'Graph',
|
||||
view: new recline.View.FlotGraph({
|
||||
model: dataset
|
||||
})
|
||||
}
|
||||
];
|
||||
return views;
|
||||
}
|
||||
|
||||
// provide a demonstration in memory dataset
|
||||
function localDataset() {
|
||||
var datasetId = 'test-dataset';
|
||||
var inData = {
|
||||
metadata: {
|
||||
title: 'My Test Dataset'
|
||||
, name: '1-my-test-dataset'
|
||||
, id: datasetId
|
||||
},
|
||||
fields: [{id: 'x'}, {id: 'y'}, {id: 'z'}, {id: 'country'}, {id: 'label'}],
|
||||
documents: [
|
||||
{id: 0, x: 1, y: 2, z: 3, country: 'DE', label: 'first'}
|
||||
, {id: 1, x: 2, y: 4, z: 6, country: 'UK', label: 'second'}
|
||||
, {id: 2, x: 3, y: 6, z: 9, country: 'US', label: 'third'}
|
||||
, {id: 3, x: 4, y: 8, z: 12, country: 'UK', label: 'fourth'}
|
||||
, {id: 4, x: 5, y: 10, z: 15, country: 'UK', label: 'fifth'}
|
||||
, {id: 5, x: 6, y: 12, z: 18, country: 'DE', label: 'sixth'}
|
||||
]
|
||||
};
|
||||
var backend = new recline.Backend.Memory();
|
||||
backend.addDataset(inData);
|
||||
var dataset = new recline.Model.Dataset({id: datasetId}, backend);
|
||||
dataset.queryState.addFacet('country');
|
||||
return dataset;
|
||||
}
|
||||
|
||||
// setup the loader menu in top bar
|
||||
function setupLoader(callback) {
|
||||
// pre-populate webstore load form with an example url
|
||||
var demoUrl = 'http://thedatahub.org/api/data/b9aae52b-b082-4159-b46f-7bb9c158d013';
|
||||
$('form.js-import-url input[name="source"]').val(demoUrl);
|
||||
$('form.js-import-url').submit(function(e) {
|
||||
e.preventDefault();
|
||||
$('.modal.js-import-dialog-url').modal('hide');
|
||||
var $form = $(e.target);
|
||||
var source = $form.find('input[name="source"]').val();
|
||||
var type = $form.find('select[name="backend_type"]').val();
|
||||
var dataset = new recline.Model.Dataset({
|
||||
id: 'my-dataset',
|
||||
url: source,
|
||||
webstore_url: source
|
||||
},
|
||||
type
|
||||
);
|
||||
callback(dataset);
|
||||
});
|
||||
|
||||
$('.js-import-dialog-file form').submit(function(e) {
|
||||
e.preventDefault();
|
||||
var $form = $(e.target);
|
||||
$('.modal.js-import-dialog-file').modal('hide');
|
||||
var $file = $form.find('input[type="file"]')[0];
|
||||
var file = $file.files[0];
|
||||
recline.Backend.loadFromCSVFile(file, function(dataset) {
|
||||
callback(dataset)
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
9
app/style/demo.css
Normal file
9
app/style/demo.css
Normal file
@@ -0,0 +1,9 @@
|
||||
body {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
/* we do not have a LH sidebar */
|
||||
.container-fluid > .content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user