028dfca859
* List options to load from in dropdown menu rather than modal dialog * Provide some help info in load dialog * Support DataHub (including auto-guessing of Data API) - fixes #110.
236 lines
10 KiB
HTML
236 lines
10 KiB
HTML
<!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-dialog.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.facetviewer.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="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>
|
||
</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>
|
||
</body>
|
||
</html>
|
||
|