From fa123b6e945fd2f0e05c04bff793b1c26c551cc4 Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Mon, 30 Apr 2012 03:56:53 +0100 Subject: [PATCH 1/6] [bugfix,view-graph][xs]: hovers on bar graphs were wrong because we were not switching x,y due to it being horizontal. --- src/view-graph.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/view-graph.js b/src/view-graph.js index d9fe7873..e858a51d 100644 --- a/src/view-graph.js +++ b/src/view-graph.js @@ -301,6 +301,12 @@ my.Graph = Backbone.View.extend({ $("#flot-tooltip").remove(); var x = item.datapoint[0]; var y = item.datapoint[1]; + // it's horizontal so we have to flip + if (self.state.attributes.graphType === 'bars') { + var _tmp = x; + x = y; + y = _tmp; + } // convert back from 'index' value on x-axis (e.g. in cases where non-number values) if (self.model.currentDocuments.models[x]) { x = self.model.currentDocuments.models[x].get(self.state.attributes.group); From 2791690142e7dc5676e2ee2a7cf6c63db10bd7c7 Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Wed, 2 May 2012 22:08:59 +0100 Subject: [PATCH 2/6] [app/content][xs]: micro tweak to tagline for explorer. --- app/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/index.html b/app/index.html index c91f9462..656bc497 100644 --- a/app/index.html +++ b/app/index.html @@ -98,8 +98,8 @@

Welcome to the Recline Data Explorer

-

The Data Explorer is an application for exploring - and working with data built in pure javascript and html. In basic operation it's much like a spreadsheet - though it's +

Recline allows you to explore and work with data in your browser and then share with others

+ In basic operation it's much like a spreadsheet - though it's feature set is a little different. In particular, the Data Explorer provides:
    From 3390c119ce1ce59b5e4173f11e5fd69dd60355f5 Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Wed, 2 May 2012 22:12:24 +0100 Subject: [PATCH 3/6] [doc,refactor][s]: switch to jekyll-based build (so template in _layouts/default.html and index.html refactored to use this). --- .gitignore | 1 + _layouts/default.html | 77 ++++++++++++++++++++++++++++++++++++++++++ index.html | 78 +++---------------------------------------- 3 files changed, 82 insertions(+), 74 deletions(-) create mode 100644 _layouts/default.html diff --git a/.gitignore b/.gitignore index bc7c182c..76a5efdd 100755 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .DS_Store sandbox/* .*.swp +_site/* diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 00000000..df2e9b1c --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,77 @@ + + + + + {{ page.title }} - Recline Data Explorer and Library + + + + + + + + + +
    +
    +
    + Recline Data Explorer and Library + + +
    +
    +
    + +{{content}} + +
    +
    +
    +
    +
    Use the Explorer
    +

    Visit the Data Explorer »

    +
    Get the Library
    +

    Development Version
    v0.3 (67k)

    +
    +
    +
    Dependencies
    + +
    +
    +
    Documentation
    + +
    +
    +
    Contacts
    + + +
    +
    +
    +
    + + + diff --git a/index.html b/index.html index c9bc3261..abcacef4 100644 --- a/index.html +++ b/index.html @@ -1,32 +1,7 @@ - - - - - Recline Data Explorer and Library - - - - - - - - - -
    -
    -
    - Recline Data Explorer and Library - - -
    -
    -
    +--- +layout: default +title: Home +---
    @@ -318,48 +293,3 @@
    -
    -
    -
    -
    -
    Use the Explorer
    -

    Visit the Data Explorer »

    -
    Get the Library
    -

    Development Version
    v0.3 (67k)

    -
    -
    -
    Dependencies
    - -
    -
    -
    Documentation
    - -
    -
    -
    Contacts
    - - -
    -
    -
    -
    - - - From 4e57e5236a9ebb035649d617f6fa0e43ac10bd1b Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Thu, 3 May 2012 21:10:10 +0100 Subject: [PATCH 4/6] [doc,refactor][s]: split out library docs into library.html. --- css/site.css | 52 ++++---------- index.html | 197 ++------------------------------------------------- library.html | 171 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 191 insertions(+), 229 deletions(-) create mode 100644 library.html diff --git a/css/site.css b/css/site.css index bbdd302d..63242ea2 100644 --- a/css/site.css +++ b/css/site.css @@ -110,28 +110,10 @@ a.dotted:hover { background-color: #bc130e \9; } -a.btn-large.showtitle[title] { - position:relative; - margin-bottom:26px; - min-width:117px; -} -a.btn-large.showtitle[title]:after { - content: attr(title); - position:absolute; - bottom:-26px; - left:0px; - font-size:12px; - height:26px; - line-height:26px; - min-width:145px; - text-align:center; -} - .btn-large .icon-large { height:25px; width:25px; - margin-top:-2px; - margin-left:-25px; + margin-top:-4px; margin-right:7px; } .btn-large .icon-white.icon-large { @@ -177,12 +159,16 @@ a.btn-large.showtitle[title]:after { box-shadow: none; } +body { + padding-top: 60px; +} + section { padding-top:20px; } -.page-header { - margin-top:50px; +.home-page.page-header { + margin-top:-10px; background: #2d2d2d; /* Old browsers */ background: -moz-linear-gradient(top, #2d2d2d 0%, #040404 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d2d2d), color-stop(100%,#040404)); /* Chrome,Safari4+ */ @@ -197,31 +183,31 @@ section { border:none; font-family:'Open Sans', Helvetica, Arial, sans-serif; } -.page-header a { +.home-page.page-header a { color:#FFF; } -.page-header a.dotted { +.home-page.page-header a.dotted { border-color:#FFF; } -.page-header .container { +.home-page.page-header .container { background-image: url(images/header-screen.png); background-repeat: no-repeat; background-position: -3px 0px; } -.page-header .inner { +.home-page.page-header .inner { padding:0px 0px 30px 40px; font-size:16px; } -.page-header .inner ol { +.home-page.page-header .inner ol { list-style-type:upper-latin; font-size:20px; font-style:italic; } -.page-header .inner .header-button { +.home-page.page-header .inner .header-button { display:inline-block; } -.page-header:after { +.home-page.page-header:after { margin-top:-14px; } @@ -229,15 +215,6 @@ section.grey { background-color:#f5f5f5; } -section:after { - content: " "; - height:14px; - display:block; - background-image: url(images/zigzags.png); - background-repeat: repeat-x; - background-position: center 1px; -} - section.grey:after { background-position: center -50px; } @@ -245,6 +222,7 @@ section.grey:after { .footer { background-color:#040404; color:#CCC; + margin-top: 30px; } .footer:before { content: " "; diff --git a/index.html b/index.html index abcacef4..b7d55bba 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ layout: default title: Home --- -
    +
    @@ -13,13 +13,13 @@ title: Home
    1. Powerful data explorer built in pure javascript and html
      2. -
    2. Suite of data components - grid, graphing and data connectors
      3. +
    3. A library of data components - grid, graphing and data connectors
    — All built with Backbone
    - Use It - Get It + Use the Explorer + Use the Library
    @@ -74,195 +74,8 @@ title: Home
    -
    +
    -
    -
    -

    Data Explorer Documentation

    -
    -
    -
    -
    -

    Usage instructions are built into the Data Explorer - itself so no specific additional documentation is provided on usage.

    -

    To embed the data explorer in another site you can use a simple iframe in - your web page:

    -
    -
    - -
    -
    -
    -
    -

    Alternatively, you can initialize the explorer yourself from javascript. To - see how to do this just take at look at the Explorer's initialization - javascript in: app.js.

    -
    -
    -
    -
    -

    Library Documentation

    - -

    Examples

    - -

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

    - -

    Note: for all the following examples you should have - included relevant Recline dependencies.

    - -

    Simple in-memory dataset.

    - 
    -        // Some data you have
-        // Your data must be in the form of list of documents / rows
-        // Each document/row is an Object with keys and values
-        var data = [
-            {id: 0, x: 1, y: 2, z: 3, country: 'UK', 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'}
-          ];
-        
-        // Create a Dataset object from local in-memory data
-        // Dataset object is a Backbone model - more info on attributes in model docs below
-        var dataset = recline.Backend.createDataset(data);
-        
-        // Now create the main explorer view (it will create other views as needed)
-        // DataExplorer is a Backbone View
-        var explorer = recline.View.DataExplorer({
-          model: dataset,
-          // you can specify any element to bind to in the dom
-          el: $('.data-explorer-here')
-        });
-        // Start Backbone routing (if you want routing support)
-        Backbone.history.start();
-
    - -

    Creating a Dataset Explicitly with a Backend

    - 
    -        // Connect to ElasticSearch index/type as our data source
-        // There are many other backends you can use (and you can write your own)
-        var backend = new recline.Backend.ElasticSearch();
-        
-        // Dataset is a Backbone model so the first hash become model attributes
-        var dataset = recline.Model.Dataset({
-            id: 'my-id',
-            // url for source of this dataset - will be used by backend
-            url: 'http://localhost:9200/my-index/my-type',
-            // any other metadata e.g.
-            title: 'My Dataset Title'
-          },
-          backend
-        );
-
    -
    -
    -
    -
    -

    Concepts and Structure

    -
    -
    -
    -
    - -

    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 (Documents in our - terminology) which it can load from the relevant Backend.
      • -
    • Document: an individual data item - (e.g. a row from a relational database or a spreadsheet, a document 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 Documents to data from a - specific 'Backend' data source. They provide methods for loading and saving - Datasets and individuals Documents 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 documents 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:

    -
      -
    • DataExplorer: 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
      • -
    -
    -
    -
    -
    -

    Source Docs (via Docco)

    -
    -
    -
    -
    -

    Models and Views (Widgets)

    - -
    -
    -

    Backends

    - -
    -
    -
    -
    -

    Tests

    -

    Run the tests online.

    -
    -

    History

    diff --git a/library.html b/library.html new file mode 100644 index 00000000..e771e7ab --- /dev/null +++ b/library.html @@ -0,0 +1,171 @@ +--- +layout: default +title: Library - Home +--- + +
    + +
    +

    + The Data Library +

    +
    +
    +
    +

    Examples

    + +

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

    + +

    Note: for all the following examples you should have + included relevant Recline dependencies.

    + +

    Simple in-memory dataset.

    + 
    +        // Some data you have
+        // Your data must be in the form of list of documents / rows
+        // Each document/row is an Object with keys and values
+        var data = [
+            {id: 0, x: 1, y: 2, z: 3, country: 'UK', 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'}
+          ];
+        
+        // Create a Dataset object from local in-memory data
+        // Dataset object is a Backbone model - more info on attributes in model docs below
+        var dataset = recline.Backend.createDataset(data);
+        
+        // Now create the main explorer view (it will create other views as needed)
+        // DataExplorer is a Backbone View
+        var explorer = recline.View.DataExplorer({
+          model: dataset,
+          // you can specify any element to bind to in the dom
+          el: $('.data-explorer-here')
+        });
+        // Start Backbone routing (if you want routing support)
+        Backbone.history.start();
+
    + +

    Creating a Dataset Explicitly with a Backend

    + 
    +        // Connect to ElasticSearch index/type as our data source
+        // There are many other backends you can use (and you can write your own)
+        var backend = new recline.Backend.ElasticSearch();
+        
+        // Dataset is a Backbone model so the first hash become model attributes
+        var dataset = recline.Model.Dataset({
+            id: 'my-id',
+            // url for source of this dataset - will be used by backend
+            url: 'http://localhost:9200/my-index/my-type',
+            // any other metadata e.g.
+            title: 'My Dataset Title'
+          },
+          backend
+        );
+
    +
    +
    +
    +
    +

    Concepts and Structure

    +
    +
    +
    +
    + +

    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 (Documents in our + terminology) which it can load from the relevant Backend.
      • +
    • Document: an individual data item + (e.g. a row from a relational database or a spreadsheet, a document 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 Documents to data from a + specific 'Backend' data source. They provide methods for loading and saving + Datasets and individuals Documents 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 documents 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:

    +
      +
    • DataExplorer: 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
      • +
    +
    +
    +
    +
    +

    Source Docs (via Docco)

    +
    +
    +
    +
    +

    Models and Views (Widgets)

    + +
    +
    +

    Backends

    + +
    +
    +
    +
    + From f1ed1cd5934bc890515bc63d0e208cd897453d0f Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Thu, 3 May 2012 21:12:51 +0100 Subject: [PATCH 5/6] [doc,template][xs]: tweak the links in the top navbar. --- _layouts/default.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index df2e9b1c..7605bbcf 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -17,10 +17,10 @@
    - Recline Data Explorer and Library + Recline Data Explorer and Data Library From 2291f069487deebaaed0647bc84c3d13a5faba40 Mon Sep 17 00:00:00 2001 From: Rufus Pollock Date: Mon, 7 May 2012 03:53:30 +0100 Subject: [PATCH 6/6] [app][s]: split CSV and Excel as options in importer and use this info to explicitly set format for dataproxy. * Previously could not import CSV files if did not end in .csv. --- app/index.html | 5 +++-- app/js/app.js | 17 ++++++++++------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/app/index.html b/app/index.html index 656bc497..48df1faf 100644 --- a/app/index.html +++ b/app/index.html @@ -153,9 +153,10 @@
    diff --git a/app/js/app.js b/app/js/app.js index 675914c8..4070c841 100755 --- a/app/js/app.js +++ b/app/js/app.js @@ -128,14 +128,17 @@ var ExplorerApp = Backbone.View.extend({ $('.modal.js-import-dialog-url').modal('hide'); var $form = $(e.target); var source = $form.find('input[name="source"]').val(); + var datasetInfo = { + id: 'my-dataset', + url: source, + webstore_url: source + }; var type = $form.find('select[name="backend_type"]').val(); - var dataset = new recline.Model.Dataset({ - id: 'my-dataset', - url: source, - webstore_url: source - }, - type - ); + if (type === 'csv' || type === 'excel') { + datasetInfo.format = type; + type = 'dataproxy'; + } + var dataset = new recline.Model.Dataset(datasetInfo, type); this.createExplorer(dataset); },