knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed couchdb backend, updated backbone and underscore, added couchdb multiview example in demos

Browse Source
This commit is contained in:
Bietz
2012-08-06 14:53:34 -07:00
committed by Rufus Pollock
parent 00d36f2dac
commit b8537aae57
4 changed files with 185 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
demos/couchdb_multiview/app.js Executable file
View File

@@ -0,0 +1,90 @@
jQuery(function($) {
window.dataExplorer = null;
window.explorerDiv = $('.data-explorer-here');
// This is some fancy stuff to allow configuring the multiview from
// parameters in the query string
//
// For more on state see the view documentation.
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';
}
//Add your couchdb here!!!
//"couchdb" is what a choose for my reverse proxy. look up apache reverse or nginx reverse proxy. you need to set this up before you can connect your db
var dataset = new recline.Model.Dataset({
db_url: '/couchdb/yourcouchdb',
view_url: '/couchdb/yourcouchdb/_design/yourdesigndoc/_view/yourview',
backend: 'couchdb',
query_options: {
'key': '_id'
}
});
dataset.fetch().done(function(dataset) {
console.log('records: ' + dataset.records);
});
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: 'transform',
label: 'Transform',
view: new recline.View.Transform({
model: dataset
})
}
];
window.dataExplorer = new recline.View.MultiView({
model: dataset,
el: $el,
state: state,
views: views
});
}

78
demos/couchdb_multiview/index.html Executable file
View File

@@ -0,0 +1,78 @@
<!DOCTYPE HTML>
<html>
<head>
<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">
<!-- 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/transform.css">
<link rel="stylesheet" href="../../css/map.css">
<link rel="stylesheet" href="../../css/multiview.css">
<!-- 3rd party dependencies -->
<script type="text/javascript" src="../../vendor/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="../../vendor/underscore/underscore.1.3.3.js"></script>
<script type="text/javascript" src="../../vendor/backbone/backbone.0.9.2.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="../../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/moment/1.6.2/moment.js"></script>
<script type="text/javascript" src="../../vendor/timeline/20120520/js/timeline.js"></script>
<script type="text/javascript" src="../../src/backend.couchdb.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/costco.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>
<script type="text/javascript" src="../../dist/recline.js"></script>
</style>
</head>
<body>
<div class="ex-1"></div>
<!--
<div id="mymap"></div>
<div id="mygraph"></div>
<div id="mygrid"></div>
<div style="clear: both;"></div>
-->
<style type="text/css">
.recline-slickgrid {
height: 550px;
}
.recline-timeline .vmm-timeline {
height: 550px;
}
</style>
<div class="data-explorer-here"></div>
<div style="clear: both;"></div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

4
demos/index.html
View File

@@ -13,6 +13,10 @@ root: ../
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<div class="well"> <div class="well">
<h3><a href="couchdb_multiview/">CouchDB Multiview Demo</a></h3>
<p>You will need to modify the "app.js" file in "demos/couchdb_multiview"
to connect to your couch database. Also, don't forget to configure your
<b>reverse proxy or proxy so you can connect to your database</b>.</p>
<h3><a href="multiview/">Multiview Demo</a></h3> <h3><a href="multiview/">Multiview Demo</a></h3>
<p>See the integrated <a href="multiview/">multiview in action on a <p>See the integrated <a href="multiview/">multiview in action on a
sample dataset</a> - the multiview incorporates most the main views sample dataset</a> - the multiview incorporates most the main views

24
src/backend.couchdb.js Normal file → Executable file
View File

@@ -3,7 +3,7 @@ this.recline.Backend = this.recline.Backend || {};
this.recline.Backend.CouchDB = this.recline.Backend.CouchDB || {}; this.recline.Backend.CouchDB = this.recline.Backend.CouchDB || {};
(function($, my) { (function($, my) {
my.__type__ = 'couchdb'; my.__type__ = 'couchdb';
// ## CouchDB Wrapper // ## CouchDB Wrapper
// //
@@ -11,9 +11,10 @@ this.recline.Backend.CouchDB = this.recline.Backend.CouchDB || {};
// @param {String} endpoint: url for CouchDB database, e.g. for Couchdb running // @param {String} endpoint: url for CouchDB database, e.g. for Couchdb running
// on localhost:5984 with database // ckan-std it would be: // on localhost:5984 with database // ckan-std it would be:
// //
// <pre>http://localhost:5984/ckan-std</pre>
// //
// TODO Add user/password arguments for couchdb authentication support. // TODO Add user/password arguments for couchdb authentication support.
//
// See the example how to use this in: "demos/couchdb_multiview"
my.CouchDBWrapper = function(db_url, view_url, options) { my.CouchDBWrapper = function(db_url, view_url, options) {
var self = this; var self = this;
self.endpoint = db_url; self.endpoint = db_url;
@@ -150,17 +151,16 @@ this.recline.Backend.CouchDB = this.recline.Backend.CouchDB || {};
// //
// Backbone connector for a CouchDB backend. // Backbone connector for a CouchDB backend.
// //
// Usage: // Usage: (also see demos/couchdb_multiview)
//
// var backend = new recline.Backend.CouchDB();
// var dataset = new recline.Model.Dataset({ // var dataset = new recline.Model.Dataset({
// db_url: '/couchdb/mydb', // db_url: '/couchdb/iid',
// view_url: '/couchdb/mydb/_design/design1/_views/view1', // view_url: '/couchdb/iid/_design/latlon/_view/latlon',
// query_options: { // backend: 'couchdb',
// 'key': 'some_document_key' // query_options: {
// } // 'key': '_id'
// }
// }); // });
// backend.fetch(dataset.toJSON()); //
// backend.query(query, dataset.toJSON()).done(function () { ... }); // backend.query(query, dataset.toJSON()).done(function () { ... });
// //
// Alternatively: // Alternatively:
@@ -494,6 +494,6 @@ _deleteDocument = function (del_doc, dataset) {
dfd.reject(args); dfd.reject(args);
}); });
return dfd.promise(); return dfd.promise();
}
}; };
}(jQuery, this.recline.Backend.CouchDB)); }(jQuery, this.recline.Backend.CouchDB));