diff --git a/_layouts/default.html b/_layouts/default.html index e251d0d0..85c33fbb 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -24,13 +24,47 @@
- Recline Data Explorer and Library -
@@ -41,22 +75,27 @@
-

Use the Data Explorer »

Use the Library »

+

Recline.js is freely redistributable under the terms of the MIT license.

-
+
+
+
+
-
+
Contacts
-
    + diff --git a/css/site/site.css b/css/site/site.css index e44ce6dc..9519056a 100644 --- a/css/site/site.css +++ b/css/site/site.css @@ -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; } diff --git a/index.html b/index.html index 141786cc..520e0c09 100644 --- a/index.html +++ b/index.html @@ -11,98 +11,11 @@ title: Home Recline Data Explorer and Library
    -
      -
    1. Powerful data explorer built in pure javascript and html
      2. -
    2. A library of data components - grid, graphing and data connectors
      3. -
    - — All built with Backbone -
    -
    - Use the Explorer - Use the Library + A simple but powerful library for building data applications in + pure Javascript and HTML.
-
-
-
-
-

Recline is Two Things

-
-
-
-
-
    -
  • A Data Explorer combining a data grid, Google Refine-style data - transforms and visualizations all in lightweight javascript and html.
    • -
  • A simple but powerful library of extensible of data components - data - grid, graphing, and data connectors - which you can selectively use and build - on.
    • -
-
-
-

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.

-
-
-
-
-

Main Features

-
    -
  • View and edit your data in a clean grid / table interface
    • -
  • Bulk update/clean your data using an easy scripting UI
    • -
  • Easily extensible with new Backends so you can connect to your - database or storage layer
    • -
  • Visualize data
    • -
  • Open-source, pure javascript and designed for integration -- so it is - easy to embed in other sites and applications
    • -
  • Built on the simple but powerful Backbone giving a - clean and robust design which is easy to extend
    • -
  • Properly designed model with clean separation of data and presentation
    • -
  • Componentized design means you use only what you need
    • -
-
-
- Recline Data Explorer Screenshot -
-
-
-
- -
-
-
-
-

History

-
-
-
-
-

Max Ogden was developing Recline as the frontend data browser and editor for - his http://datacouch.com/ project. - Meanwhile, Rufus Pollock and the CKAN team at - the Open Knowledge Foundation had been working - on a Data Explorer for use in - the DataHub and CKAN software.

- -

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.

-
-
-

The new project forked off Max's original recline - codebase combining some portions of the original Data Explorer. - However, it has been rewritten from the ground up using Backbone.

-
-
-
-
diff --git a/library.html b/library.html index 850afcf3..4e980bc6 100644 --- a/library.html +++ b/library.html @@ -4,10 +4,9 @@ title: Library - Home ---
-

- Recline Library and Data Components + Documentation

@@ -16,146 +15,121 @@ title: Library - Home set of models (Dataset, Record/Row, Field) and views (Grid, Map, Graph etc).

-

Examples

+ +

Concepts and Structure

+ +

The Recline Library consists of 3 parts: Models, Backends and Views

+ +
+
+
+

Models

+

Models help you structure your work with data by providing some standard objects such as Dataset and Record – a Dataset being a collection of Records. More »

+
+
+
+
+

Backends

+

Backends connect your Models to data sources (and stores) – for example Google Docs spreadsheets, local CSV files, the DataHub, ElasticSearch etc. More »

+
+
+
+
+

Views

+

Views are user interface components for displaying, editing or interacting with the data. For example, maps, graphs, data grids or a query editor. More »

+
+
+
+ +
+

Tutorials

Note: A quick read through of the Concepts section will - likely be useful in understanding the details of the examples.
+ likely be useful in understanding the details of these tutorials.
-
-

Recline Quickstart Guide

+
+
+

Recline Quickstart Guide

+
-
-

Loading from difference sources: Google Docs, Local CSV, DataHub

+
+
+

Loading from difference sources: Google Docs, Local CSV, DataHub

+
-
-

Twitter Example

+
+
+

Twitter Example

+
-
-

Customing Display and Import using Fields

+
+
+

Customing Display and Import using Fields

+
-
-

Listening to events

+
+
+

Listening to events

+
-
-

Setting and Getting State

+
+
+

Setting and Getting State

+

Extending Recline

-
-

Create a new View

-
-
-

Create a new Backend

-
-
-

Create a Custom Record Object

-
-
- -
-
-

Concepts and Structure

+
+
+

Create a new View

-
-
-

Recline has a simple structure layered on top of the basic Model/View - distinction inherent in Backbone.

- -

Models

-

There are two main model objects:

-
    -
  • Dataset: 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.
    • -
  • Record: 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).
    • -
- -

Additional, related models:

-
    -
  • Field: a field/column on a - dataset.
    • -
  • Query: 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).
    • -
  • Facet: 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.
    • -
- -

More detail of how these work can be found in the Model source docs.

- - -
- -
-

Backends

-

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.

- -

A template Base class can be found in the - Backend base module of the source docs. 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.

- -

Views

-

Complementing the model are various Views (you can - also easily write your own). Each view holds a pointer to a Dataset:

-
    -
  • MultiView: the parent view which manages the overall app and sets up - sub views.
    • -
  • Grid: the data grid view.
    • -
  • Graph: a simple graphing view using Flot.
    • -
  • Map: a map view using Leaflet.
    • -
- -

There are additional views which do not display a whole dataset but which - are useful:

-
    -
  • QueryEditor: a query editor view
    • -
  • FacetViewer: display facets
    • -
+
+
+

Create a new Backend

-
-
-

Source Docs (via Docco)

-
-
-
-
-

Models and Views (Widgets)

- -
-
-

Backends

- +
+
+

Create a Custom Record Object

+
+ +

Source Docs (via Docco)

+
+
+

Models

+ +
+
+

Backends

+ +
+
+

Dataset Views and Widgets

+ +
+
+
diff --git a/test/backend/elasticsearch.test.js b/test/backend/elasticsearch.test.js index 9170b5cb..c63821c8 100644 --- a/test/backend/elasticsearch.test.js +++ b/test/backend/elasticsearch.test.js @@ -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 } } } diff --git a/test/model.test.js b/test/model.test.js index 0c1fe167..556eb80a 100644 --- a/test/model.test.js +++ b/test/model.test.js @@ -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 diff --git a/test/widget.filtereditor.test.js b/test/widget.filtereditor.test.js index 36f16e40..825cd5e5 100644 --- a/test/widget.filtereditor.test.js +++ b/test/widget.filtereditor.test.js @@ -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);