Skip to content

Instantly share code, notes, and snippets.

@reimertz

reimertz/index.html

Last active April 29, 2016 20:19
Show Gist options
  • Save reimertz/16ea0091ac581960a959e93a5eb0643e to your computer and use it in GitHub Desktop.
Save reimertz/16ea0091ac581960a959e93a5eb0643e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demos - Multiview - Recline Data Explorer and Library</title>
<!-- 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="http://okfnlabs.org/recline/vendor/bootstrap/2.0.2/css/bootstrap.css" />
<link rel="stylesheet" href="http://okfnlabs.org/recline/vendor/leaflet/0.4.4/leaflet.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://okfnlabs.org/recline/vendor/leaflet/0.4.4/leaflet.ie.css" />
<![endif]-->
<link rel="stylesheet" href="http://okfnlabs.org/recline/vendor/leaflet.markercluster/MarkerCluster.css">
<link rel="stylesheet" href="http://okfnlabs.org/recline/vendor/leaflet.markercluster/MarkerCluster.Default.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://okfnlabs.org/recline/vendor/leaflet.markercluster/MarkerCluster.Default.ie.css" />
<![endif]-->
<link rel="stylesheet" href="http://okfnlabs.org/recline/vendor/slickgrid/2.0.1/slick.grid.css">
<link rel="stylesheet" href="http://okfnlabs.org/recline/vendor/timeline/css/timeline.css">
<!-- Recline CSS components -->
<link rel="stylesheet" href="http://okfnlabs.org/recline/css/grid.css">
<link rel="stylesheet" href="http://okfnlabs.org/recline/css/slickgrid.css">
<link rel="stylesheet" href="http://okfnlabs.org/recline/css/flot.css">
<link rel="stylesheet" href="http://okfnlabs.org/recline/css/map.css">
<link rel="stylesheet" href="http://okfnlabs.org/recline/css/multiview.css">
<link rel="stylesheet" href="http://okfnlabs.org/recline/css/timeline.css">
<!-- /Recline CSS components -->
<!-- 3rd party JS libraries -->
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/underscore/1.4.4/underscore.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/backbone/1.0.0/backbone.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/mustache/0.5.0-dev/mustache.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/bootstrap/2.0.2/bootstrap.js"></script>
<!--[if lte IE 8]>
<script language="javascript" type="text/javascript" src="http://okfnlabs.org/recline/vendor/flot/excanvas.min.js"></script>
<![endif]-->
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/flot/jquery.flot.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/flot/jquery.flot.time.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/leaflet/0.4.4/leaflet.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/leaflet.markercluster/leaflet.markercluster.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/slickgrid/2.0.1/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/slickgrid/2.0.1/slick.grid.min.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/moment/2.0.0/moment.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/vendor/timeline/js/timeline.js"></script>
<!--[if lte IE 7]>
<script language="javascript" type="text/javascript" src="http://okfnlabs.org/recline/vendor/json/json2.js"></script>
<![endif]-->
<!--
## Just use the all in one library version rather than individual files
<script type="text/javascript" src="http://okfnlabs.org/recline/dist/recline.js"></script>
-->
<!-- model and backends -->
<script type="text/javascript" src="http://okfnlabs.org/recline/src/ecma-fixes.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/model.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/backend.memory.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/backend.dataproxy.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline.backend.gdocs/backend.gdocs.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/backend.csv.js"></script>
<!-- views -->
<script type="text/javascript" src="http://okfnlabs.org/recline/src/view.grid.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/view.slickgrid.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/view.flot.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/view.graph.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/view.map.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/view.timeline.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/widget.pager.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/widget.queryeditor.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/widget.filtereditor.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/widget.valuefilter.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/widget.facetviewer.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/widget.fields.js"></script>
<script type="text/javascript" src="http://okfnlabs.org/recline/src/view.multiview.js"></script>
<!-- link rel="stylesheet" href="http://okfnlabs.org/recline/vendor/bootstrap/2.0.2/css/bootstrap-responsive.css" -->
<link href="http://okfnlabs.org/recline/css-site/pygments.css" rel="stylesheet" type="text/css" />
<link href="http://okfnlabs.org/recline/css-site/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<style type="text/css">
.recline-slickgrid {
height: 550px;
}
.recline-timeline .vmm-timeline {
height: 550px;
}
</style>
<div class="data-explorer-here"></div>
<script>
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';
}
var dataset = null;
if (state.dataset || state.url) {
var datasetInfo = _.extend({
url: state.url,
backend: state.backend
},
state.dataset
);
dataset = new recline.Model.Dataset(datasetInfo);
} else {
dataset = new recline.Model.Dataset({
records: [
{id: 0, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', title: 'first', lat:52.56, lon:13.40},
{id: 1, date: '2011-02-02', x: 2, y: 4, z: 24, country: 'UK', title: 'second', lat:54.97, lon:-1.60},
{id: 2, date: '2011-03-03', x: 3, y: 6, z: 9, country: 'US', title: 'third', lat:40.00, lon:-75.5},
{id: 3, date: '2011-04-04', x: 4, y: 8, z: 6, country: 'UK', title: 'fourth', lat:57.27, lon:-6.20},
{id: 4, date: '2011-05-04', x: 5, y: 10, z: 15, country: 'UK', title: 'fifth', lat:51.58, lon:0},
{id: 5, date: '2011-06-02', x: 6, y: 12, z: 18, country: 'DE', title: 'sixth', lat:51.04, lon:7.9}
],
// let's be really explicit about fields
// Plus take opportunity to set date to be a date field and set some labels
fields: [
{id: 'id'},
{id: 'date', type: 'date'},
{id: 'x', type: 'number'},
{id: 'y', type: 'number'},
{id: 'z', type: 'number'},
{id: 'country', 'label': 'Country'},
{id: 'title', 'label': 'Title'},
{id: 'lat'},
{id: 'lon'}
]
});
}
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,
state: {
gridOptions: {
editable: true,
enabledAddRow: true,
enabledDelRow: true,
autoEdit: false,
enableCellNavigation: true
},
columnsEditor: [
{ column: 'date', editor: Slick.Editors.Date },
{ column: 'title', editor: Slick.Editors.Text }
]
}
})
},
{
id: 'graph',
label: 'Graph',
view: new recline.View.Graph({
model: dataset
})
},
{
id: 'map',
label: 'Map',
view: new recline.View.Map({
model: dataset
})
}
];
window.dataExplorer = new recline.View.MultiView({
model: dataset,
el: $el,
state: state,
views: views
});
}
</script>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment