[docs,app,demos/multiview][m]: convert app back to being a demo of multiview (app proper is now in dataexplorer repo).
This commit is contained in:
Rufus Pollock
parent
3d944814ae
commit
c2f5debf1f
@ -1,33 +1,26 @@
|
||||
<link rel="stylesheet" href="vendor/leaflet/0.3.1/leaflet.css">
|
||||
<link rel="stylesheet" href="{{page.root}}vendor/leaflet/0.3.1/leaflet.css">
|
||||
<!--[if lte IE 8]>
|
||||
<link rel="stylesheet" href="vendor/leaflet/0.3.1/leaflet.ie.css" />
|
||||
<link rel="stylesheet" href="{{page.root}}vendor/leaflet/0.3.1/leaflet.ie.css" />
|
||||
<![endif]-->
|
||||
<link rel="stylesheet" href="vendor/slickgrid/2.0.1/slick.grid.css">
|
||||
<link rel="stylesheet" href="{{page.root}}vendor/slickgrid/2.0.1/slick.grid.css">
|
||||
|
||||
<!-- Recline CSS components -->
|
||||
<link rel="stylesheet" href="css/grid.css">
|
||||
<link rel="stylesheet" href="css/graph.css">
|
||||
<link rel="stylesheet" href="css/map.css">
|
||||
<link rel="stylesheet" href="css/multiview.css">
|
||||
<link rel="stylesheet" href="{{page.root}}dist/recline.css">
|
||||
<!-- /Recline CSS components -->
|
||||
|
||||
<!-- 3rd party JS libraries -->
|
||||
<script type="text/javascript" src="vendor/jquery/1.7.1/jquery.js"></script>
|
||||
<script type="text/javascript" src="vendor/underscore/1.1.6/underscore.js"></script>
|
||||
<script type="text/javascript" src="vendor/backbone/0.5.1/backbone.js"></script>
|
||||
<script type="text/javascript" src="vendor/mustache/0.5.0-dev/mustache.js"></script>
|
||||
<script type="text/javascript" src="vendor/bootstrap/2.0.2/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="vendor/jquery.flot/0.7/jquery.flot.js"></script>
|
||||
<script type="text/javascript" src="vendor/leaflet/0.3.1/leaflet.js"></script>
|
||||
<script type="text/javascript" src="{{page.root}}vendor/jquery/1.7.1/jquery.js"></script>
|
||||
<script type="text/javascript" src="{{page.root}}vendor/underscore/1.1.6/underscore.js"></script>
|
||||
<script type="text/javascript" src="{{page.root}}vendor/backbone/0.5.1/backbone.js"></script>
|
||||
<script type="text/javascript" src="{{page.root}}vendor/mustache/0.5.0-dev/mustache.js"></script>
|
||||
<script type="text/javascript" src="{{page.root}}vendor/bootstrap/2.0.2/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="{{page.root}}vendor/jquery.flot/0.7/jquery.flot.js"></script>
|
||||
<script type="text/javascript" src="{{page.root}}vendor/leaflet/0.3.1/leaflet.js"></script>
|
||||
<script type="text/javascript" src="{{page.root}}vendor/slickgrid/2.0.1/jquery-ui-1.8.16.custom.min.js"></script>
|
||||
<script type="text/javascript" src="{{page.root}}vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js"></script>
|
||||
<script type="text/javascript" src="{{page.root}}vendor/slickgrid/2.0.1/slick.grid.min.js"></script>
|
||||
<script type="text/javascript" src="{{page.root}}vendor/moment/1.6.2/moment.js"></script>
|
||||
<script type="text/javascript" src="{{page.root}}vendor/timeline/20120520/js/timeline.js"></script>
|
||||
|
||||
<!--
|
||||
The recline library itself - this includes all components at once.
|
||||
|
||||
You can include just the components you need e.g.
|
||||
|
||||
<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="dist/recline.js"></script>
|
||||
<script type="text/javascript" src="{{page.root}}dist/recline.js"></script>
|
||||
|
||||
|
||||
@ -27,17 +27,17 @@
|
||||
<a class="logo-icon pull-left" href="/">
|
||||
<img src="http://assets.okfn.org/p/recline/img/chair.png" />
|
||||
</a>
|
||||
<a class="brand" href="/"><strong>Recline.js</strong> – relax with your data</a>
|
||||
<a class="brand" href="{{page.root}}"><strong>Recline.js</strong> – relax with your data</a>
|
||||
<ul class="nav">
|
||||
<li>
|
||||
<a href="/docs/">
|
||||
<a href="{{page.root}}docs/">
|
||||
<i class="icon-book icon-white"></i>
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider-vertical"></li>
|
||||
<li>
|
||||
<a href="demos.html">
|
||||
<a href="{{page.root}}demos/">
|
||||
<i class="icon-pencil icon-white"></i>
|
||||
Demos
|
||||
</a>
|
||||
@ -75,7 +75,7 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<p class="getit-btn"><a href="library.html" class="btn">Use the Library »</a></p>
|
||||
<p class="getit-btn"><a href="{{page.root}}docs/" class="btn">Use the Library »</a></p>
|
||||
<p>Recline.js is freely redistributable under the terms of the MIT license.</p>
|
||||
</div>
|
||||
<div class="span3">
|
||||
|
||||
170
app/built.html
170
app/built.html
@ -1,170 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Recline Data Explorer (Built Sources)</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="../vendor/leaflet/0.3.1/leaflet.css">
|
||||
<!--[if lte IE 8]>
|
||||
<link rel="stylesheet" href="../vendor/leaflet/0.3.1/leaflet.ie.css" />
|
||||
<![endif]-->
|
||||
|
||||
<!-- Recline CSS components -->
|
||||
<link rel="stylesheet" href="../css/data-explorer.css">
|
||||
<link rel="stylesheet" href="../css/grid.css">
|
||||
<link rel="stylesheet" href="../css/graph.css">
|
||||
<link rel="stylesheet" href="../css/map.css">
|
||||
<!-- /Recline CSS components -->
|
||||
|
||||
<!-- Custom CSS for the Data Explorer Online App -->
|
||||
<link rel="stylesheet" href="style/demo.css">
|
||||
|
||||
<link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap-responsive.css">
|
||||
|
||||
<!-- 3rd party JS libraries -->
|
||||
<script type="text/javascript" src="../vendor/jquery/1.7.1/jquery.js"></script>
|
||||
<script type="text/javascript" src="../vendor/underscore/1.1.6/underscore.js"></script>
|
||||
<script type="text/javascript" src="../vendor/backbone/0.5.1/backbone.js"></script>
|
||||
<script type="text/javascript" src="../vendor/jquery.flot/0.7/jquery.flot.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="../vendor/leaflet/0.3.1/leaflet.js"></script>
|
||||
|
||||
<!-- recline library -->
|
||||
<script type="text/javascript" src="../recline.js"></script>
|
||||
|
||||
<!-- non-library javascript specific to this demo -->
|
||||
<script type="text/javascript" src="js/app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="recline-app">
|
||||
<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 href=".js-share-and-embed-dialog" data-toggle="modal">
|
||||
Share and Embed
|
||||
<i class="icon-share icon-white"></i>
|
||||
</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="control-group">
|
||||
<label class="control-label">Separator</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="separator" value="," class="spam1"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label">Text delimiter</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="delimiter" value='"' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label">Encoding</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="encoding" value="UTF-8" />
|
||||
</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-share-and-embed-dialog" style="display: none;">
|
||||
<div class="modal-header">
|
||||
<a class="close" data-dismiss="modal">×</a>
|
||||
<h3>Share and Embed</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h4>Sharable Link to current View</h4>
|
||||
<textarea class="view-link" style="width: 100%; height: 100px;"></textarea>
|
||||
<h4>Embed this View</h4>
|
||||
<textarea class="view-embed" style="width: 100%; height: 200px;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="content">
|
||||
<div class="data-explorer-here"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 87 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
265
app/index.html
265
app/index.html
@ -1,265 +0,0 @@
|
||||
<!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="../vendor/leaflet/0.3.1/leaflet.css">
|
||||
<!--[if lte IE 8]>
|
||||
<link rel="stylesheet" href="../vendor/leaflet/0.3.1/leaflet.ie.css" />
|
||||
<![endif]-->
|
||||
<link rel="stylesheet" href="../vendor/slickgrid/2.0.1/slick.grid.css">
|
||||
<link rel="stylesheet" href="../vendor/timeline/20120520/css/timeline.css">
|
||||
|
||||
<!-- Recline CSS components -->
|
||||
<link rel="stylesheet" href="../css/grid.css">
|
||||
<link rel="stylesheet" href="../css/slickgrid.css">
|
||||
<link rel="stylesheet" href="../css/graph.css">
|
||||
<link rel="stylesheet" href="../css/map.css">
|
||||
<link rel="stylesheet" href="../css/multiview.css">
|
||||
<!-- /Recline CSS components -->
|
||||
|
||||
<!-- Custom CSS for the Data Explorer Online App -->
|
||||
<link rel="stylesheet" href="../css/site/site.css">
|
||||
<link rel="stylesheet" href="style/demo.css">
|
||||
|
||||
<link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap-responsive.css">
|
||||
|
||||
<!-- 3rd party JS libraries -->
|
||||
<script type="text/javascript" src="../vendor/jquery/1.7.1/jquery.js"></script>
|
||||
<script type="text/javascript" src="../vendor/underscore/1.1.6/underscore.js"></script>
|
||||
<script type="text/javascript" src="../vendor/backbone/0.5.1/backbone.js"></script>
|
||||
<script type="text/javascript" src="../vendor/moment/1.6.2/moment.js"></script>
|
||||
<script type="text/javascript" src="../vendor/jquery.flot/0.7/jquery.flot.js"></script>
|
||||
<script type="text/javascript" src="../vendor/mustache/0.5.0-dev/mustache.js"></script>
|
||||
<script type="text/javascript" src="../vendor/bootstrap/2.0.2/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../vendor/leaflet/0.3.1/leaflet.js"></script>
|
||||
<script type="text/javascript" src="../vendor/slickgrid/2.0.1/jquery-ui-1.8.16.custom.min.js"></script>
|
||||
<script type="text/javascript" src="../vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js"></script>
|
||||
<script type="text/javascript" src="../vendor/slickgrid/2.0.1/slick.grid.min.js"></script>
|
||||
<script type="text/javascript" src="../vendor/timeline/20120520/js/timeline.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/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/csv.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../src/view.grid.js"></script>
|
||||
<script type="text/javascript" src="../src/view.slickgrid.js"></script>
|
||||
<script type="text/javascript" src="../src/view.transform.js"></script>
|
||||
<script type="text/javascript" src="../src/view.graph.js"></script>
|
||||
<script type="text/javascript" src="../src/view.map.js"></script>
|
||||
<script type="text/javascript" src="../src/view.timeline.js"></script>
|
||||
<script type="text/javascript" src="../src/widget.pager.js"></script>
|
||||
<script type="text/javascript" src="../src/widget.queryeditor.js"></script>
|
||||
<script type="text/javascript" src="../src/widget.filtereditor.js"></script>
|
||||
<script type="text/javascript" src="../src/widget.fields.js"></script>
|
||||
<script type="text/javascript" src="../src/view.multiview.js"></script>
|
||||
|
||||
<!-- non-library javascript specific to this demo -->
|
||||
<script type="text/javascript" src="js/app.js"></script>
|
||||
<!-- for demo dataset -->
|
||||
<script type="text/javascript" src="../test/base.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="recline-app">
|
||||
<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 class="dropdown">
|
||||
<a data-toggle="dropdown" class="dropdown-toggle">
|
||||
Load Data <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu js-load">
|
||||
<li>
|
||||
<a href="#" class="js-load-dialog-url" data-type="gdocs" data-help="You must have published your spreadsheet to load it here (File Menu - Publish to the Web)">Load from Google Docs Spreadsheet</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="js-load-dialog-url" data-type="datahub" data-help="The link to the Dataset Data Resource on the DataHub to load from - note that the resource must have its Data API enabled">Load from the DataHub</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="js-load-dialog-url" data-type="csv" data-help="Provide the link to the CSV file online">Load from CSV online</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="js-load-dialog-url" data-type="excel" data-help="Provide the link to the Excel file online">Load from Excel online</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="js-load-dialog-url" data-type="elasticsearch" data-help="Provide the link to the ElasticSearch endpoint (either an index or a type/table">Load from ElasticSearch</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a data-toggle="modal" href=".js-load-dialog-file">Load from CSV on disk</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href=".js-share-and-embed-dialog" data-toggle="modal">
|
||||
Share and Embed
|
||||
<i class="icon-share icon-white"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=".js-settings" data-toggle="modal">
|
||||
Settings
|
||||
<i class="icon-cog icon-white" style="margin-top: 1px;"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="content">
|
||||
<div class="page-home backbone-page">
|
||||
<div class="hero-unit">
|
||||
<h1>Welcome to the Recline Data Explorer</h1>
|
||||
<p>Recline allows you to explore and work with data in your browser and then share with others</p>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span4">
|
||||
<div class="well">
|
||||
<h3>View the demo</h3>
|
||||
<p>Try out the demo using a local example dataset.</p>
|
||||
<p><a class="btn btn-primary" href="?url=demo#explorer">View the demo dataset »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="well">
|
||||
<h3>Features</h3>
|
||||
<ul>
|
||||
<li>Data grid</li>
|
||||
<li>Data editing including programmatic data transformation in javascript</li>
|
||||
<li>Visualizations includes graphs and maps</li>
|
||||
<li>Load and export from a variety of sources including online sources such as online Excel and CSV files, Google docs and
|
||||
the <a href="http://datahub.io/">DataHub</a> and offline sources like CSV files on your local machine.</li>
|
||||
<li>Use online or offline - because the app is built in pure javascript and html you can use it anywhere there's a modern web browser. Using offline is as easy and downloading this web page to your local machine.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="well">
|
||||
<h3>Get started</h3>
|
||||
<p>Get started straight away for example by importing some data from an external source <strong>using the menu at the top right</strong> of this page.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-explorer backbone-page">
|
||||
<div class="data-explorer-here"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modals for menus -->
|
||||
<div class="modal fade in js-load-dialog-url" style="display: none;">
|
||||
<div class="modal-header">
|
||||
<a class="close" data-dismiss="modal">×</a>
|
||||
<h3>Load from URL</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="js-load-url">
|
||||
<div class="control-group">
|
||||
<div class="controls">
|
||||
<input type="text" name="source" class="span5" placeholder="URL to data source" />
|
||||
<p class="help-block"></p>
|
||||
<input name="backend_type" style="display: none;" />
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Load »</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade in js-load-dialog-file" style="display: none;">
|
||||
<div class="modal-header">
|
||||
<a class="close" data-dismiss="modal">×</a>
|
||||
<h3>Load 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="control-group">
|
||||
<label class="control-label">Separator</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="separator" value="," class="spam1"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label">Text delimiter</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="delimiter" value='"' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label">Encoding</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="encoding" value="UTF-8" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Load »</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade in js-share-and-embed-dialog" style="display: none;">
|
||||
<div class="modal-header">
|
||||
<a class="close" data-dismiss="modal">×</a>
|
||||
<h3>Share and Embed</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h4>Sharable Link to current View</h4>
|
||||
<textarea class="view-link" style="width: 100%; height: 100px;"></textarea>
|
||||
<h4>Embed this View</h4>
|
||||
<textarea class="view-embed" style="width: 100%; height: 200px;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade in js-settings" style="display: none;">
|
||||
<div class="modal-header">
|
||||
<a class="close" data-dismiss="modal">×</a>
|
||||
<h3>Settings</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal">
|
||||
<div class="control-group">
|
||||
<label class="control-label">DataHub API Key</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="datahub_api_key" value="" />
|
||||
<p class="help-block"><strong>Getting your API key:</strong> Register/Login to <a href="http://datahub.io/">http://datahub.io/</a> and then visit your user home page (click on the link at the top right). On your home page your API key is located at the top of the page in the section showing your main user details.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save »</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
246
app/js/app.js
246
app/js/app.js
@ -1,246 +0,0 @@
|
||||
jQuery(function($) {
|
||||
window.ReclineDataExplorer = new ExplorerApp({
|
||||
el: $('.recline-app')
|
||||
})
|
||||
});
|
||||
|
||||
var ExplorerApp = Backbone.View.extend({
|
||||
events: {
|
||||
'click .nav .js-load-dialog-url': '_onLoadURLDialog',
|
||||
'submit form.js-load-url': '_onLoadURL',
|
||||
'submit .js-load-dialog-file form': '_onLoadFile',
|
||||
'submit .js-settings form': '_onSettingsSave'
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
this.el = $(this.el);
|
||||
this.dataExplorer = null;
|
||||
this.explorerDiv = $('.data-explorer-here');
|
||||
_.bindAll(this, 'viewExplorer', 'viewHome');
|
||||
|
||||
this.router = new Backbone.Router();
|
||||
this.router.route('', 'home', this.viewHome);
|
||||
this.router.route(/explorer/, 'explorer', this.viewExplorer);
|
||||
Backbone.history.start();
|
||||
|
||||
var state = recline.View.parseQueryString(decodeURIComponent(window.location.search));
|
||||
if (state) {
|
||||
_.each(state, function(value, key) {
|
||||
try {
|
||||
value = JSON.parse(value);
|
||||
} catch(e) {}
|
||||
state[key] = value;
|
||||
});
|
||||
if (state.embed) {
|
||||
$('.navbar').hide();
|
||||
$('body').attr('style', 'padding-top: 0px');
|
||||
}
|
||||
}
|
||||
var dataset = null;
|
||||
// special cases for demo / memory dataset
|
||||
if (state.url === 'demo' || state.backend === 'memory') {
|
||||
dataset = localDataset();
|
||||
}
|
||||
else if (state.dataset || state.url) {
|
||||
dataset = recline.Model.Dataset.restore(state);
|
||||
}
|
||||
if (dataset) {
|
||||
this.createExplorer(dataset, state);
|
||||
}
|
||||
this._initializeSettings();
|
||||
},
|
||||
|
||||
viewHome: function() {
|
||||
this.switchView('home');
|
||||
},
|
||||
|
||||
viewExplorer: function() {
|
||||
this.router.navigate('explorer');
|
||||
this.switchView('explorer');
|
||||
},
|
||||
|
||||
switchView: function(path) {
|
||||
$('.backbone-page').hide();
|
||||
var cssClass = path.replace('/', '-');
|
||||
$('.page-' + cssClass).show();
|
||||
},
|
||||
|
||||
|
||||
// make Explorer creation / initialization in a function so we can call it
|
||||
// again and again
|
||||
createExplorer: function(dataset, state) {
|
||||
var self = this;
|
||||
// remove existing data explorer view
|
||||
var reload = false;
|
||||
if (this.dataExplorer) {
|
||||
this.dataExplorer.remove();
|
||||
reload = true;
|
||||
}
|
||||
this.dataExplorer = null;
|
||||
var $el = $('<div />');
|
||||
$el.appendTo(this.explorerDiv);
|
||||
var views = [
|
||||
{
|
||||
id: 'grid',
|
||||
label: 'Grid',
|
||||
view: new recline.View.SlickGrid({
|
||||
model: dataset
|
||||
})
|
||||
},
|
||||
|
||||
{
|
||||
id: 'graph',
|
||||
label: 'Graph',
|
||||
view: new recline.View.Graph({
|
||||
model: dataset
|
||||
})
|
||||
},
|
||||
{
|
||||
id: 'map',
|
||||
label: 'Map',
|
||||
view: new recline.View.Map({
|
||||
model: dataset
|
||||
})
|
||||
},
|
||||
{
|
||||
id: 'timeline',
|
||||
label: 'Timeline',
|
||||
view: new recline.View.Timeline({
|
||||
model: dataset
|
||||
})
|
||||
}
|
||||
];
|
||||
|
||||
this.dataExplorer = new recline.View.MultiView({
|
||||
model: dataset,
|
||||
el: $el,
|
||||
state: state,
|
||||
views: views
|
||||
});
|
||||
this._setupPermaLink(this.dataExplorer);
|
||||
this._setupEmbed(this.dataExplorer);
|
||||
|
||||
this.viewExplorer();
|
||||
},
|
||||
|
||||
_setupPermaLink: function(explorer) {
|
||||
var self = this;
|
||||
var $viewLink = this.el.find('.js-share-and-embed-dialog .view-link');
|
||||
explorer.state.bind('change', function() {
|
||||
$viewLink.val(self.makePermaLink(explorer.state));
|
||||
});
|
||||
$viewLink.val(self.makePermaLink(explorer.state));
|
||||
},
|
||||
|
||||
_setupEmbed: function(explorer) {
|
||||
var self = this;
|
||||
var $embedLink = this.el.find('.js-share-and-embed-dialog .view-embed');
|
||||
function makeEmbedLink(state) {
|
||||
var link = self.makePermaLink(state);
|
||||
link = link + '&embed=true';
|
||||
var out = Mustache.render('<iframe src="{{link}}" width="100%" min-height="500px;"></iframe>', {link: link});
|
||||
return out;
|
||||
}
|
||||
explorer.state.bind('change', function() {
|
||||
$embedLink.val(makeEmbedLink(explorer.state));
|
||||
});
|
||||
$embedLink.val(makeEmbedLink(explorer.state));
|
||||
},
|
||||
|
||||
makePermaLink: function(state) {
|
||||
var qs = recline.View.composeQueryString(state.toJSON());
|
||||
return window.location.origin + window.location.pathname + qs;
|
||||
},
|
||||
|
||||
// setup the loader menu in top bar
|
||||
setupLoader: function(callback) {
|
||||
// pre-populate webstore load form with an example url
|
||||
var demoUrl = 'http://thedatahub.org/api/data/b9aae52b-b082-4159-b46f-7bb9c158d013';
|
||||
$('form.js-load-url input[name="source"]').val(demoUrl);
|
||||
},
|
||||
|
||||
_onLoadURLDialog: function(e) {
|
||||
e.preventDefault();
|
||||
var $link = $(e.target);
|
||||
var $modal = $('.modal.js-load-dialog-url');
|
||||
$modal.find('h3').text($link.text());
|
||||
$modal.modal('show');
|
||||
$modal.find('input[name="source"]').val('');
|
||||
$modal.find('input[name="backend_type"]').val($link.attr('data-type'));
|
||||
$modal.find('.help-block').text($link.attr('data-help'));
|
||||
},
|
||||
|
||||
_onLoadURL: function(e) {
|
||||
e.preventDefault();
|
||||
$('.modal.js-load-dialog-url').modal('hide');
|
||||
var $form = $(e.target);
|
||||
var source = $form.find('input[name="source"]').val();
|
||||
var datasetInfo = {
|
||||
id: 'my-dataset',
|
||||
url: source
|
||||
};
|
||||
var type = $form.find('input[name="backend_type"]').val();
|
||||
if (type === 'csv' || type === 'excel') {
|
||||
datasetInfo.format = type;
|
||||
type = 'dataproxy';
|
||||
}
|
||||
if (type === 'datahub') {
|
||||
// have a full resource url so convert to data API
|
||||
if (source.indexOf('dataset') != -1) {
|
||||
var parts = source.split('/');
|
||||
datasetInfo.url = parts[0] + '/' + parts[1] + '/' + parts[2] + '/api/data/' + parts[parts.length-1];
|
||||
}
|
||||
type = 'elasticsearch';
|
||||
}
|
||||
datasetInfo.backend = type;
|
||||
var dataset = new recline.Model.Dataset(datasetInfo);
|
||||
this.createExplorer(dataset);
|
||||
},
|
||||
|
||||
_onLoadFile: function(e) {
|
||||
var self = this;
|
||||
e.preventDefault();
|
||||
var $form = $(e.target);
|
||||
$('.modal.js-load-dialog-file').modal('hide');
|
||||
var $file = $form.find('input[type="file"]')[0];
|
||||
var dataset = new recline.Model.Dataset({
|
||||
file: $file.files[0],
|
||||
separator : $form.find('input[name="separator"]').val(),
|
||||
delimiter : $form.find('input[name="delimiter"]').val(),
|
||||
encoding : $form.find('input[name="encoding"]').val(),
|
||||
backend: 'csv'
|
||||
});
|
||||
dataset.fetch().done(function() {
|
||||
self.createExplorer(dataset)
|
||||
});
|
||||
},
|
||||
|
||||
_getSettings: function() {
|
||||
var settings = localStorage.getItem('dataexplorer.settings');
|
||||
settings = JSON.parse(settings) || {};
|
||||
return settings;
|
||||
},
|
||||
|
||||
_initializeSettings: function() {
|
||||
var settings = this._getSettings();
|
||||
$('.modal.js-settings form input[name="datahub_api_key"]').val(settings.datahubApiKey);
|
||||
},
|
||||
|
||||
_onSettingsSave: function(e) {
|
||||
var self = this;
|
||||
e.preventDefault();
|
||||
var $form = $(e.target);
|
||||
$('.modal.js-settings').modal('hide');
|
||||
var datahubKey = $form.find('input[name="datahub_api_key"]').val();
|
||||
var settings = this._getSettings();
|
||||
settings.datahubApiKey = datahubKey;
|
||||
localStorage.setItem('dataexplorer.settings', JSON.stringify(settings));
|
||||
}
|
||||
});
|
||||
|
||||
// provide a demonstration in memory dataset
|
||||
function localDataset() {
|
||||
var dataset = Fixture.getDataset();
|
||||
return dataset;
|
||||
}
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
body {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
/* we do not have a LH sidebar */
|
||||
.container-fluid > .content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.recline-grid-container {
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.recline-slickgrid {
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.recline-timeline .vmm-timeline {
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: container
|
||||
title: Demos
|
||||
root: ../
|
||||
---
|
||||
|
||||
<div class="page-header">
|
||||
@ -12,8 +13,8 @@ title: Demos
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="well">
|
||||
<h3>Explorer Demo</h3>
|
||||
<p>View the full Data Explorer in action on a sample dataset <a href="app/?url=demo">Demo »</a></p>
|
||||
<h3>Multiview Demo</h3>
|
||||
<p>See the integrated multiview "Data Explorer" in action on a sample dataset <a href="multiview/">Demo »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
84
demos/multiview/app.js
Executable file
84
demos/multiview/app.js
Executable file
@ -0,0 +1,84 @@
|
||||
jQuery(function($) {
|
||||
window.dataExplorer = null;
|
||||
window.explorerDiv = $('.data-explorer-here');
|
||||
|
||||
// see if we have any configuration from query string
|
||||
var state = recline.View.parseQueryString(decodeURIComponent(window.location.search));
|
||||
if (state) {
|
||||
_.each(state, function(value, key) {
|
||||
try {
|
||||
value = JSON.parse(value);
|
||||
} catch(e) {}
|
||||
state[key] = value;
|
||||
});
|
||||
} else {
|
||||
state.url = 'demo';
|
||||
}
|
||||
var dataset = null;
|
||||
if (state.dataset || state.url) {
|
||||
dataset = recline.Model.Dataset.restore(state);
|
||||
} else {
|
||||
dataset = localDataset();
|
||||
}
|
||||
createExplorer(dataset, state);
|
||||
});
|
||||
|
||||
|
||||
// make Explorer creation / initialization in a function so we can call it
|
||||
// again and again
|
||||
var createExplorer = function(dataset, state) {
|
||||
// remove existing data explorer view
|
||||
var reload = false;
|
||||
if (window.dataExplorer) {
|
||||
window.dataExplorer.remove();
|
||||
reload = true;
|
||||
}
|
||||
window.dataExplorer = null;
|
||||
var $el = $('<div />');
|
||||
$el.appendTo(window.explorerDiv);
|
||||
var views = [
|
||||
{
|
||||
id: 'grid',
|
||||
label: 'Grid',
|
||||
view: new recline.View.SlickGrid({
|
||||
model: dataset
|
||||
})
|
||||
},
|
||||
|
||||
{
|
||||
id: 'graph',
|
||||
label: 'Graph',
|
||||
view: new recline.View.Graph({
|
||||
model: dataset
|
||||
})
|
||||
},
|
||||
{
|
||||
id: 'map',
|
||||
label: 'Map',
|
||||
view: new recline.View.Map({
|
||||
model: dataset
|
||||
})
|
||||
},
|
||||
{
|
||||
id: 'timeline',
|
||||
label: 'Timeline',
|
||||
view: new recline.View.Timeline({
|
||||
model: dataset
|
||||
})
|
||||
}
|
||||
];
|
||||
|
||||
window.dataExplorer = new recline.View.MultiView({
|
||||
model: dataset,
|
||||
el: $el,
|
||||
state: state,
|
||||
views: views
|
||||
});
|
||||
}
|
||||
|
||||
// provide a demonstration in memory dataset
|
||||
function localDataset() {
|
||||
var dataset = Fixture.getDataset();
|
||||
return dataset;
|
||||
}
|
||||
|
||||
24
demos/multiview/index.html
Normal file
24
demos/multiview/index.html
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
layout: container
|
||||
title: Demos - Multiview
|
||||
recline-deps: true
|
||||
root: ../../
|
||||
---
|
||||
|
||||
<style type="text/css">
|
||||
.recline-slickgrid {
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.recline-timeline .vmm-timeline {
|
||||
height: 450px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="data-explorer-here"></div>
|
||||
|
||||
<div style="clear: both;"></div>
|
||||
|
||||
<script type="text/javascript" src="{{page.root}}/test/base.js"></script>
|
||||
<script type="text/javascript" src="app.js"></script>
|
||||
|
||||
@ -8,7 +8,7 @@ title: Home
|
||||
<div class="row">
|
||||
<div class="span8 offset4">
|
||||
<h1>
|
||||
<img src="images/logo.png" width="455" height="190" alt="Recline Data Explorer and Library">
|
||||
<a href="docs/"><img src="images/logo.png" width="455" height="190" alt="Recline Data Explorer and Library"></a>
|
||||
</h1>
|
||||
<div class="inner">
|
||||
A simple but powerful library for building data applications in
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user