Merge branch 'master' into gh-pages

This commit is contained in:
Rufus Pollock 2012-06-20 18:41:35 +01:00
commit 8bc4499c1b
7 changed files with 170 additions and 329 deletions

View File

@ -24,13 +24,47 @@
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/"><strong>Recline</strong> Data Explorer and Library</a>
<ul class="nav pull-right">
<li><a href="app/">Data Explorer</a></li>
<li><a href="library.html">Data Library</a></li>
<li><a href="http://github.com/okfn/recline/">Code on GitHub</a></li>
<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> &ndash; relax with your data</a>
<ul class="nav">
<li>
<a href="library.html">
<i class="icon-book icon-white"></i>
Documentation
</a>
</li>
<li class="divider-vertical"></li>
<li>
<a href="demos.html">
<i class="icon-pencil icon-white"></i>
Demos
</a>
</li>
<li class="divider-vertical"></li>
<li>
<a href="http://github.com/okfn/recline/">
<i class="icon-download-alt icon-white"></i>
GitHub
</a>
</li>
<li class="divider-vertical"></li>
<li>
<a href="http://twitter.com/ReclineJS">
<i class="icon-star icon-white"></i>
Twitter
</a>
</li>
<li class="divider-vertical"></li>
<li>
<a href="test/">
<i class="icon-ok icon-white"></i>
Unit Tests
</a>
</li>
<li class="divider-vertical"></li>
</ul>
</div>
</div>
</div>
@ -41,22 +75,27 @@
<div class="container">
<div class="row">
<div class="span4">
<p class="getit-btn"><a href="app/" class="btn">Use the Data Explorer &raquo;</a></p>
<p class="getit-btn"><a href="library.html" class="btn">Use the Library &raquo;</a></p>
<p>Recline.js is freely redistributable under the terms of the MIT license.</p>
</div>
<div class="span4">
<div class="span3">
<ul>
<li><a href="http://datahub.io/">The DataHub</a></li>
<li><a href="http://OpenSpending.org/">OpenSpending.org</a></li>
<li><a href="http://datacouch.com/">DataCouch.com</a></li>
<li><a href="http://okfnlabs.org//">Open Knowledge Foundation (OKFN) Labs</a></li>
</ul>
</div>
<div class="span3">
<ul>
<li><a href="http://okfnlabs.org/">Open Knowledge Foundation Labs</a></li>
<li><a href="http://opendefinition.org/">Open Definition</a></li>
<li><a href="http://okfn.org/">Open Knowledge Foundation</a></li>
</ul>
</div>
<div class="span4">
<div class="span2">
<h5>Contacts</h5>
<ul>
<ul style="list-style-type: none; margin-left: 0;">
<li><a href="http://twitter.com/ReclineJS">@ReclineJS</a></li>
<li><a href="http://twitter.com/maxogden">@maxogden</a></li>
<li><a href="http://twitter.com/rufuspollock">@rufuspollock</a></li>
</ul>

View File

@ -31,106 +31,17 @@ a {
a:hover {
color: #bc130e;
}
a.dotted {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #333;
color:#333;
}
a.dotted:hover {
text-decoration:none;
}
.btn-explorer {
background: #545454; /* Old browsers */
background: -moz-linear-gradient(top, #545454 0%, #454545 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#545454), color-stop(100%,#454545)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #545454 0%,#454545 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #545454 0%,#454545 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #545454 0%,#454545 100%); /* IE10+ */
background: linear-gradient(top, #545454 0%,#454545 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#454545',GradientType=0 ); /* IE6-9 */
border-color: #454545 #454545 #454545;
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
border: 1px solid #454545;
border-bottom-color: #454545;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color:#FFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-explorer:hover,
.btn-explorer:active,
.btn-explorer.active,
.btn-explorer.disabled,
.btn-explorer[disabled] {
background-color: #454545;
background-image:none;
color:#FFF;
}
.btn-explorer:active,
.btn-explorer.active {
background-color: #454545 \9;
background-image:none;
color:#FFF;
}
.btn-large {
padding: 9px 14px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
margin-right:10px;
}
.btn-library {
background: #c7231d; /* Old browsers */
background: -moz-linear-gradient(top, #c7231d 0%, #bc130e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c7231d), color-stop(100%,#bc130e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c7231d 0%,#bc130e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c7231d 0%,#bc130e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c7231d 0%,#bc130e 100%); /* IE10+ */
background: linear-gradient(top, #c7231d 0%,#bc130e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7231d', endColorstr='#bc130e',GradientType=0 ); /* IE6-9 */
border-color: #0055cc #0055cc #003580;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-library:hover,
.btn-library:active,
.btn-library.active,
.btn-library.disabled,
.btn-library[disabled] {
background-color: #bc130e;
background-image:none;
}
.btn-library:active,
.btn-library.active {
background-color: #bc130e \9;
}
.btn-large .icon-large {
height:25px;
width:25px;
margin-top:-4px;
margin-right:7px;
}
.btn-large .icon-white.icon-large {
background-image: url(images/icons/white.png);
background-repeat: no-repeat;
}
.btn-large .icon-white.icon-arrow-down.icon-large {
background-position: 3px 1px;
}
.btn-large .icon-white.icon-graph.icon-large {
background-position: -50px 4px;
}
/* ---------------------------------------------------
Layout
--------------------------------------------------- */
.navbar .logo-icon img {
margin-top: 6px;
margin-right: 8px;
height: 34px;
}
.navbar .brand {
font-family:'Open Sans', Helvetica, Arial, sans-serif;
font-style:italic;
@ -144,6 +55,10 @@ a.dotted:hover {
padding: 15px 10px;
}
.navbar .divider-vertical {
height: 50px;
}
.navbar-inner {
height:50px;
background: #303030; /* Old browsers */
@ -182,6 +97,10 @@ section {
margin-bottom:0px;
border:none;
font-family:'Open Sans', Helvetica, Arial, sans-serif;
padding: 60px;
padding-bottom: 150px;
/* hide crocodile top to footer on front page */
margin-bottom: -30px;
}
.home-page.page-header a {
color:#FFF;
@ -197,14 +116,8 @@ section {
.home-page.page-header .inner {
padding:0px 0px 30px 40px;
font-size:16px;
}
.home-page.page-header .inner ol {
list-style-type:upper-latin;
font-size:20px;
font-style:italic;
}
.home-page.page-header .inner .header-button {
display:inline-block;
line-height: 23px;
width: 400px;
}
.home-page.page-header:after {
@ -247,7 +160,7 @@ section.grey:after {
color:#333333;
}
.library .row .well {
.library .tutorials .well {
height: 60px;
}

View File

@ -11,98 +11,11 @@ title: Home
<img src="images/logo.png" width="455" height="190" alt="Recline Data Explorer and Library">
</h1>
<div class="inner">
<ol style="list-style-type:upper-latin;">
<li>Powerful data explorer built in pure javascript and html</li>
<li>A library of data components - grid, graphing and data connectors</li>
</ol>
&mdash; All built with <a href="http://backbonejs.org/" class="dotted">Backbone</a>
</div>
<div class="inner">
<a class="btn btn-large btn-explorer showtitle" href="app/" title="the data explorer"><i class="icon-graph icon-white icon-large"></i>Use the Explorer</a>
<a class="btn btn-large btn-library showtitle" href="library.html" title="the data library"><i class="icon-arrow-down icon-white icon-large"></i>Use the Library</a>
A simple but powerful library for building data applications in
pure Javascript and HTML.
</div>
</div>
</div>
</div>
</section>
<section class="grey">
<div class="container">
<div class="row">
<div class="span12">
<h2>Recline is Two Things</h2>
</div>
</div>
<div class="row">
<div class="span6">
<ul>
<li>A Data Explorer combining a data grid, Google Refine-style data
transforms and visualizations all in lightweight javascript and html.</li>
<li>A simple but powerful library of extensible of data components - data
grid, graphing, and data connectors - which you can selectively use and build
on.</li>
</ul>
</div>
<div class="span6">
<p>The Explorer can be used standalone (just download and use) or can be
embedded into your own site. Recline builds on the powerful but lightweight
Backbone framework making it extremely easy to extend and adapt. The library's
modular design mean means you only have to take what you need.</p>
</div>
</div>
<div class="row">
<div class="span4">
<h2 id="features">Main Features</h2>
<ul>
<li>View and edit your data in a clean grid / table interface</li>
<li>Bulk update/clean your data using an easy scripting UI</li>
<li>Easily extensible with new Backends so you can connect to your
database or storage layer</li>
<li>Visualize data</li>
<li>Open-source, pure javascript and designed for integration -- so it is
easy to embed in other sites and applications</li>
<li>Built on the simple but powerful <a
href="http://documentcloud.github.com/backbone/">Backbone</a> giving a
clean and robust design which is easy to extend</li>
<li>Properly designed model with clean separation of data and presentation</li>
<li>Componentized design means you use only what you need</li>
</ul>
</div>
<div class="span8">
<a href="app/"><img src="images/screenshot-1.jpg" width="632" height="428" alt="Recline Data Explorer Screenshot"></a>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="span12">
<h2 id="history">History</h2>
</div>
</div>
<div class="row">
<div class="span6">
<p>Max Ogden was developing Recline as the frontend data browser and editor for
his <a href="http://datacouch.com/">http://datacouch.com/</a> project.
Meanwhile, Rufus Pollock and the <a href="http://ckan.org/">CKAN team</a> at
the <a href="http://okfn.org/">Open Knowledge Foundation</a> had been working
on a <a href="http://github.com/okfn/dataexplorer">Data Explorer</a> for use in
<a href="http://thedatahub.org">the DataHub</a> and <a
href="http://ckan.org/">CKAN software</a>.</p>
<p>When they met up, they realized that they were pretty much working on the
same thing and so decided to join forces to produce the new Recline Data
Explorer.</p>
</div>
<div class="span6">
<p>The new project forked off <a
href="https://github.com/maxogden/recline">Max's original recline
codebase</a> combining some portions of the <a
href="http://github.com/okfn/dataexplorer">original Data Explorer</a>.
However, it has been rewritten from the ground up using Backbone.</p>
</div>
</div>
</div>
</section>

View File

@ -4,10 +4,9 @@ title: Library - Home
---
<div class="container library">
<div class="page-header">
<h1>
Recline Library and Data Components
Documentation
</h1>
</div>
@ -16,146 +15,121 @@ title: Library - Home
set of models (Dataset, Record/Row, Field) and views (Grid, Map, Graph
etc).</p>
<h2 id="examples">Examples</h2>
<h2 id="concepts">Concepts and Structure</h2>
<h1><small>The Recline Library consists of 3 parts: Models, Backends and Views</small></h1>
<div class="row">
<div class="span4">
<div class="well">
<h3>Models</h3>
<p>Models help you structure your work with data by providing some standard objects such as Dataset and Record &ndash; a Dataset being a collection of Records. <a href="docs/model.html">More &raquo;</a></p>
</div>
</div>
<div class="span4">
<div class="well">
<h3>Backends</h3>
<p>Backends connect your Models to data sources (and stores) &ndash; for example Google Docs spreadsheets, local CSV files, the DataHub, ElasticSearch etc. <a href="example-backends.html">More &raquo;</a></p>
</div>
</div>
<div class="span4">
<div class="well">
<h3>Views</h3>
<p>Views are user interface components for displaying, editing or interacting with the data. For example, maps, graphs, data grids or a query editor. <a href="library-view.html">More &raquo;</a></p>
</div>
</div>
</div>
<div id="tutorials" class="tutorials">
<h2>Tutorials</h2>
<div class="alert alert-success"><strong>Note:</strong> A quick read through of the <a href="#concepts">Concepts section</a> will
likely be useful in understanding the details of the examples.</div>
likely be useful in understanding the details of these tutorials.</div>
<div class="row">
<div class="span3 well">
<h4><a href="example-quickstart.html">Recline Quickstart Guide</a></h4>
<div class="span4">
<div class="well">
<h4><a href="example-quickstart.html">Recline Quickstart Guide</a></h4>
</div>
</div>
<div class="span4 well">
<h4><a href="example-backends.html">Loading from difference sources: Google Docs, Local CSV, DataHub</a></h4>
<div class="span4">
<div class="well">
<h4><a href="example-backends.html">Loading from difference sources: Google Docs, Local CSV, DataHub</a></h4>
</div>
</div>
<div class="span3 well">
<h4>Twitter Example</h4>
<div class="span4">
<div class="well">
<h4>Twitter Example</h4>
</div>
</div>
</div>
<div class="row">
<div class="span3 well">
<h4>Customing Display and Import using Fields</h4>
<div class="span4">
<div class="well">
<h4>Customing Display and Import using Fields</h4>
</div>
</div>
<div class="span4 well">
<h4>Listening to events</h4>
<div class="span4">
<div class="well">
<h4>Listening to events</h4>
</div>
</div>
<div class="span3 well">
<h4>Setting and Getting State</h4>
<div class="span4">
<div class="well">
<h4>Setting and Getting State</h4>
</div>
</div>
</div>
<h3>Extending Recline</h3>
<div class="row">
<div class="span3 well">
<h4>Create a new View</h4>
</div>
<div class="span3 well">
<h4>Create a new Backend</h4>
</div>
<div class="span3 well">
<h4>Create a Custom Record Object</h4>
</div>
</div>
<div class="row">
<div class="span12">
<h2 id="concepts">Concepts and Structure</h2>
<div class="span4">
<div class="well">
<h4>Create a new View</h4>
</div>
</div>
<div class="row">
<div class="span6">
<p>Recline has a simple structure layered on top of the basic Model/View
distinction inherent in Backbone.</p>
<h4>Models</h4>
<p>There are two main model objects:</p>
<ul>
<li><a href="docs/model.html#dataset">Dataset</a>: represents the dataset.
Holds dataset info and a pointer to list of data items (Records in our
terminology) which it can load from the relevant Backend.</li>
<li><a href="docs/model.html#record">Record</a>: an individual data item
(e.g. a row from a relational database or a spreadsheet, a record from from
a document DB like CouchDB or MongoDB).</li>
</ul>
<p>Additional, related models:</p>
<ul>
<li><a href="docs/model.html#field">Field</a>: a field/column on a
dataset.</li>
<li><a href="docs/model.html#query">Query</a>: an object to encapsulate a
query to the backend (useful both for creating queries and for storing and
manipulating query state - e.g. from a query editor).</li>
<li><a href="docs/model.html#facet">Facet</a>: Object to store Facet
information, that is summary information (e.g. values and counts) about a
field obtained by some faceting method on the backend.</li>
</ul>
<p>More detail of how these work can be found in the <a
href="docs/model.html">Model source docs</a>.</p>
</div>
<div class="span6">
<h4>Backends</h4>
<p>Backends connect Dataset and Records to data from a
specific 'Backend' data source. They provide methods for loading and saving
Datasets and individuals Records as well as for bulk loading via a query API
and doing bulk transforms on the backend.</p>
<p>A template Base class can be found <a href="docs/backend/base.html">in the
Backend base module of the source docs</a>. It records both the relevant
methods a Backend must have and (optionally) provides a base 'class' for
inheritance. You can also find detailed examples of backend implementations in
the source documentation below.</p>
<h4>Views</h4>
<p>Complementing the model are various Views (you can
also easily write your own). Each view holds a pointer to a Dataset:</p>
<ul>
<li>MultiView: the parent view which manages the overall app and sets up
sub views.</li>
<li>Grid: the data grid view.</li>
<li>Graph: a simple graphing view using <a
href="http://code.google.com/p/flot/">Flot</a>.</li>
<li>Map: a map view using <a href="http://leaflet.cloudmade.com/">Leaflet</a>.</li>
</ul>
<p>There are additional views which do not display a whole dataset but which
are useful:</p>
<ul>
<li>QueryEditor: a query editor view</li>
<li>FacetViewer: display facets</li>
</ul>
<div class="span4">
<div class="well">
<h4>Create a new Backend</h4>
</div>
</div>
<div class="row">
<div class="span12">
<h2 id="docs-source">Source Docs (via Docco)</h2>
</div>
</div>
<div class="row">
<div class="span6">
<h4>Models and Views (Widgets)</h4>
<ul>
<li><a href="docs/model.html">Models</a></li>
<li><a href="docs/view.multiview.html">MultiView View (plus common view code)</a></li>
<li><a href="docs/view-grid.html">(Data) Grid View</a></li>
<li><a href="docs/view-graph.html">Graph View (based on Flot)</a></li>
<li><a href="docs/view-map.html">Map View (based on Leaflet)</a></li>
</ul>
</div>
<div class="span6">
<h4>Backends</h4>
<ul>
<li><a href="docs/backend/base.html">Base module providing convenience functions</a></li>
<li><a href="docs/backend/memory.html">memory: Memory Backend (local data)</a></li>
<li><a href="docs/backend/elasticsearch.html">elasticsearch: ElasticSearch Backend</a></li>
<li><a href="docs/backend/dataproxy.html">dataproxy: DataProxy Backend (CSV and XLS on the Web)</a></li>
<li><a href="docs/backend/gdocs.html">gdocs: Google Docs (Spreadsheet) Backend</a></li>
<li><a href="docs/backend/csv.html">csv: Local CSV file backend</a></li>
</ul>
<div class="span4">
<div class="well">
<h4>Create a Custom Record Object</h4>
</div>
</div>
</div>
</div>
<h2 id="docs-source">Source Docs (via Docco)</h2>
<div class="row">
<div class="span4">
<h4>Models</h4>
<ul>
<li><a href="docs/model.html">Models</a></li>
</ul>
</div>
<div class="span4">
<h4>Backends</h4>
<ul>
<li><a href="docs/backend/base.html">Base module providing convenience functions</a></li>
<li><a href="docs/backend/memory.html">memory: Memory Backend (local data)</a></li>
<li><a href="docs/backend/elasticsearch.html">elasticsearch: ElasticSearch Backend</a></li>
<li><a href="docs/backend/dataproxy.html">dataproxy: DataProxy Backend (CSV and XLS on the Web)</a></li>
<li><a href="docs/backend/gdocs.html">gdocs: Google Docs (Spreadsheet) Backend</a></li>
<li><a href="docs/backend/csv.html">csv: Local CSV file backend</a></li>
</ul>
</div>
<div class="span4">
<h4>Dataset Views and Widgets</h4>
<ul>
<li><a href="docs/view.multiview.html">MultiView View (plus common view code)</a></li>
<li><a href="docs/view-grid.html">(Data) Grid View</a></li>
<li><a href="docs/view-graph.html">Graph View (based on Flot)</a></li>
<li><a href="docs/view-map.html">Map View (based on Leaflet)</a></li>
</ul>
</div>
</div>
</div> <!-- / container -->

View File

@ -41,7 +41,7 @@ test("queryNormalize", function() {
and: [
{
term: {
xyz: 'XXX'
xyz: 'xxx'
}
}
]
@ -65,7 +65,8 @@ test("queryNormalize", function() {
and: [
{
geo_distance: {
distance: '10km',
distance: 10,
unit: 'km',
'xyz': { lon: 0, lat: 0 }
}
}

View File

@ -161,7 +161,8 @@ test('Query.addFilter', function () {
query.addFilter({type: 'geo_distance', field: 'xyz'});
var exp = {
distance: '10km',
distance: 10,
unit: 'km',
point: {
lon: 0,
lat: 0

View File

@ -56,7 +56,7 @@ test('geo_distance', function () {
$editForm = view.el.find('form.js-edit');
equal($editForm.find('.filter-geo_distance').length, 1)
deepEqual(_.keys(dataset.queryState.attributes.filters[0]), ['distance',
'point', 'type', 'field']);
'unit', 'point', 'type', 'field']);
// now set filter value and apply
$editForm.find('input[name="lat"]').val(10);