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

Merge pull request #455 from mattfullerton/master

Browse Source 
Docs
This commit is contained in:
Rufus Pollock 2014-11-03 09:59:00 +00:00
commit 5b8b02b296
8 changed files with 139 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
_includes/views-list.html Normal file
View File

@ -0,0 +1,7 @@
* <a href="{{page.root}}/docs/src/view.grid.html">Grid (simple)</a>
* <a href="{{page.root}}/docs/src/view.slickgrid.html">Grid (SlickGrid)</a>
* <a href="{{page.root}}/docs/src/view.map.html">Map</a>
* <a href="https://github.com/NuCivic/recline.view.choroplethmap.js">Choropleth Map</a>
* <a href="{{page.root}}/docs/src/view.graph.html">Graph</a>
* <a href="{{page.root}}/docs/src/view.timeline.html">Timeline</a>
* <a href="{{page.root}}/docs/src/view.multiview.html">Multiview (combines views)</a>

9
css-site/style.css
View File

@ -66,11 +66,20 @@ a:hover {
font-weight:400;
letter-spacing:-1px;
line-height: 32px;
text-shadow: none !important;
color: #ffffff;
}
.navbar .nav > li > a {
padding: 15px 10px;
font-size: 13px;
text-shadow: none !important;
color: #999999;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: #ffffff;
}
.navbar .divider-vertical {

52
docs/tutorial-grids.markdown Normal file
View File

@ -0,0 +1,52 @@
---
layout: container
title: Grids - Advanced use of grids in Recline - Tutorial
recline-deps: true
root: ../
---
<div class="page-header">
<h1>
Doing More with Grids
<br />
<small>This tutorial goes beyond the <a href="tutorial-views.html">basic
views tutorial</a> and shows you how to do more with grids</small>
</h1>
</div>
### How much can I do with a simple grid view
### Benefits of SlickGrid
What does Recline give you out of the box, what does SlickGrid have built in and how to use it (reference to stuff below).
### Preparing your page
See the instructions in the [basic views tutorial](tutorial-views.html).
### Creating a Dataset
Just like in the main tutorial, here's some example data We are going to work with:
{% highlight javascript %}
{% include data.js %}
var dataset = new recline.Model.Dataset({
records: data
});
{% endhighlight %}
<script type="text/javascript">
{% include data.js %}
var dataset = new recline.Model.Dataset({
records: data
});
</script>
### Accessing SlickGrid features
Show how we can customize SlickGrid grid "normally" - i.e. you can get access to underlying grid and tweak it as you want.
Suggest we demonstrate using this example: https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-plugin-headermenu.html
Idea here is: we don't want to mimic all that slickgrid can do through recline interface - just let people do it directly themselves ...

50
docs/tutorial-timelines.markdown Normal file
View File

@ -0,0 +1,50 @@
---
layout: container
title: Timelines - Advanced use of timelines in Recline - Tutorial
recline-deps: true
root: ../
---
<div class="page-header">
<h1>
Doing More with Timelines
<br />
<small>This tutorial goes beyond the <a href="tutorial-views.html">basic
views tutorial</a> and shows you how to do more with timelines</small>
</h1>
</div>
### Preparing your page
See the instructions in the [basic views tutorial](tutorial-views.html).
### Creating a Dataset
Just like in the main tutorial, here's some example data We are going to work with:
{% highlight javascript %}
{% include data.js %}
var dataset = new recline.Model.Dataset({
records: data
});
{% endhighlight %}
<script type="text/javascript">
{% include data.js %}
var dataset = new recline.Model.Dataset({
records: data
});
</script>
### Underlying library and Recline extensions
### Handling dates
### Customizing the rendering

11
docs/tutorial-views.markdown
View File

@ -9,10 +9,14 @@ root: ../
<h1>
Views Tutorial
<br />
<small>This step-by-step tutorial will quickly get you started with Recline basics, including creating a dataset from local data and setting up a grid, graph and map to display it.</small>
<small>This step-by-step tutorial will quickly get you started with Recline basics, including creating a dataset from local data and setting up a grid, graph, map and timeline to display it.</small>
</h1>
</div>
### Views
Views display Recline datasets in different ways. This page covers the interesting built-in views. For a full list of views including extensions outside of the Recline.js core, see the [list of currently available views]({{page.root}}docs/views.html#dataset-views-currently-available).
### Preparing your page
Before writing any code with Recline, you need to do the following preparation steps on your page:
@ -269,6 +273,10 @@ map.render();
### Creating a Timeline
<div class="alert alert-info">
The source code along with all dependencies for the map part of the tutorial can be found at <a href="https://github.com/mattfullerton/recline-view-timeline-demo">this GitHub repository</a>. See it in action via <a href="http://mattfullerton.github.io/recline-view-timeline-demo/">GitHub Pages</a>.
</div>
Now, let's create a timeline for this dataset using the date information which is
present on these data points.
@ -277,6 +285,7 @@ First, add the additional dependencies for the timeline view. The timeline is bu
{% highlight html %}
<!-- css -->
<link rel="stylesheet" href="vendor/timeline/css/timeline.css">
<link rel="stylesheet" href="css/map.css">
<!-- javascript -->
<script type="text/javascript" src="vendor/moment/2.0.0/moment.js"></script>

5
docs/tutorials.html
View File

@ -44,14 +44,13 @@ root: ../
</div>
</div>
<h3>Views &ndash; Grids, Maps, Graphs and More!</h3>
<h3>Views &ndash; visualize data</h3>
<hr />
<div class="tutorials">
<div class="row">
<div class="span4">
<div class="well">
<h4><a href="tutorial-views.html">Views Quickstart - Grids, Graphs and Maps</a></h4>
<h4><a href="tutorial-views.html">Views Quickstart - Grids, Graphs, Maps &amp; Timelines</a></h4>
</div>
</div>
<div class="span4">

6
docs/views.markdown
View File

@ -16,6 +16,9 @@ views they have a pointer to a model (or a collection) and have an associated
DOM-style element (usually this element will be bound into the page at some
point).
<div class="alert alert-info">Looking for quickstart tutorial rather than reference documentation? See the <a href="tutorial-views.html">Views Tutorial</a>.</div>
Views provided by core Recline are crudely divided into two types:
* Dataset Views: a View intended for displaying a recline.Model.Dataset in some
@ -25,6 +28,9 @@ Views provided by core Recline are crudely divided into two types:
which both provide a way for editing (a part of) a `recline.Model.Query`
associated to a Dataset.
## Dataset Views currently available
{% include views-list.html %}
## Dataset View
These views are just Backbone views with a few additional conventions:

6
index.html
View File

@ -19,9 +19,9 @@ title: Home
and allows you to connect them with your data in seconds.
</p>
<p class="links">
<a href="docs/" class="btn btn-large">Documentation &raquo;</a>
<a href="docs/tutorials.html" class="btn btn-large">Tutorials &raquo;</a>
<a href="demos/" class="btn btn-large">Demos &raquo;</a>
<a href="docs/" class="btn">Documentation &raquo;</a>
<a href="docs/tutorials.html" class="btn">Tutorials &raquo;</a>
<a href="demos/" class="btn">Demos &raquo;</a>
</p>
<h3 style="color: white; margin-top: 40px;">Get started fast</h3>