Merge branch 'master' into gh-pages

demo/js/app.js

@@ -29,8 +29,10 @@ $(function() {
 // again and again
 function createExplorer(dataset) {
   // remove existing data explorer view
+  var reload = false;
   if (window.dataExplorer) {
     window.dataExplorer.remove();
+    reload = true;
   }
   window.dataExplorer = null;
   var $el = $('<div />');
@@ -43,8 +45,10 @@ function createExplorer(dataset) {
   });
   // HACK (a bit). Issue is that Backbone will not trigger the route
   // if you are already at that location so we have to make sure we genuinely switch
+  if (reload) {
     window.dataExplorer.router.navigate('graph');
     window.dataExplorer.router.navigate('', true);
+  }
 }
 
 // convenience function
@@ -77,14 +81,14 @@ function localDataset() {
       , name: '1-my-test-dataset' 
       , id: datasetId
     },
-    fields: [{id: 'x'}, {id: 'y'}, {id: 'z'}],
+    fields: [{id: 'x'}, {id: 'y'}, {id: 'z'}, {id: 'label'}],
     documents: [
-      {id: 0, x: 1, y: 2, z: 3}
+      {id: 0, x: 1, y: 2, z: 3, label: 'first'}
-      , {id: 1, x: 2, y: 4, z: 6}
+      , {id: 1, x: 2, y: 4, z: 6, label: 'second'}
-      , {id: 2, x: 3, y: 6, z: 9}
+      , {id: 2, x: 3, y: 6, z: 9, label: 'third'}
-      , {id: 3, x: 4, y: 8, z: 12}
+      , {id: 3, x: 4, y: 8, z: 12, label: 'fourth'}
-      , {id: 4, x: 5, y: 10, z: 15}
+      , {id: 4, x: 5, y: 10, z: 15, label: 'fifth'}
-      , {id: 5, x: 6, y: 12, z: 18}
+      , {id: 5, x: 6, y: 12, z: 18, label: 'sixth'}
     ]
   };
   var backend = new recline.Backend.Memory();

docs/model.html

@@ -3,15 +3,14 @@
 
 <span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div>             </td>           </tr>                               <tr id="section-2">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-2">&#182;</a>               </div>               <h2>A Dataset model</h2>
 
-<p>A model must have the following (Backbone) attributes:</p>
+<p>A model has the following (non-Backbone) attributes:</p>
 
 <ul>
 <li>fields: (aka columns) is a FieldList listing all the fields on this
-Dataset (this can be set explicitly, or, on fetch() of Dataset
+Dataset (this can be set explicitly, or, will be set by Dataset.fetch() or Dataset.query()</li>
-information from the backend, or as is perhaps most common on the first
+<li>currentDocuments: a DocumentList containing the Documents we have
-query)</li>
+currently loaded for viewing (you update currentDocuments by calling query)</li>
-<li>currentDocuments: a DocumentList containing the Documents we have currently loaded for viewing (you update currentDocuments by calling getRows)</li>
+<li>docCount: total number of documents in this dataset</li>
-<li>docCount: total number of documents in this dataset (obtained on a fetch for this Dataset)</li>
 </ul>             </td>             <td class="code">               <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Dataset</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
   <span class="nx">__type__</span><span class="o">:</span> <span class="s1">&#39;Dataset&#39;</span><span class="p">,</span>
   <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">backend</span><span class="p">)</span> <span class="p">{</span>

src/model.js

@@ -6,14 +6,13 @@ this.recline.Model = this.recline.Model || {};
 
 // ## A Dataset model
 //
-// A model must have the following (Backbone) attributes:
+// A model has the following (non-Backbone) attributes:
 //
 // * fields: (aka columns) is a FieldList listing all the fields on this
-//   Dataset (this can be set explicitly, or, on fetch() of Dataset
+//   Dataset (this can be set explicitly, or, will be set by Dataset.fetch() or Dataset.query()
-//   information from the backend, or as is perhaps most common on the first
+// * currentDocuments: a DocumentList containing the Documents we have
-//   query)
+//   currently loaded for viewing (you update currentDocuments by calling query)
-// * currentDocuments: a DocumentList containing the Documents we have currently loaded for viewing (you update currentDocuments by calling getRows)
+// * docCount: total number of documents in this dataset
-// * docCount: total number of documents in this dataset (obtained on a fetch for this Dataset)
 my.Dataset = Backbone.Model.extend({
   __type__: 'Dataset',
   initialize: function(model, backend) {

src/view-flot-graph.js

@@ -149,11 +149,9 @@ my.FlotGraph = Backbone.View.extend({
       return
     }
     var series = this.createSeries();
-    var options = this.graphOptions[this.chartConfig.graphType];
+    var options = this.getGraphOptions(this.chartConfig.graphType);
     this.plot = $.plot(this.$graph, series, options);
-    if (this.chartConfig.graphType in { 'points': '', 'lines-and-points': '' }) {
     this.setupTooltips();
-    }
     // create this.plot and cache it
 //    if (!this.plot) {
 //      this.plot = $.plot(this.$graph, series, options);
@@ -166,7 +164,26 @@ my.FlotGraph = Backbone.View.extend({
 //    }
   },
 
-  graphOptions: { 
+  // needs to be function as can depend on state
+  getGraphOptions: function(typeId) { 
+    var self = this;
+    var tickFormatter = function (val) {
+      if (self.model.currentDocuments.models[val]) {
+        var out = self.model.currentDocuments.models[val].get(self.chartConfig.group);
+        // if the x-axis value was in fact a number we want that not the 
+        if (typeof(out) == 'number') {
+          return val;
+        } else {
+          return out;
+        }
+      }
+      return val;
+    }
+    // TODO: we should really use tickFormatter and 1 interval ticks if (and
+    // only if) x-axis values are non-numeric
+    // However, that is non-trivial to work out from a dataset (datasets may
+    // have no field type info). Thus at present we only do this for bars.
+    var options = { 
       lines: {
          series: { 
            lines: { show: true }
@@ -183,7 +200,7 @@ my.FlotGraph = Backbone.View.extend({
           points: { show: true },
           lines: { show: true }
         },
-      grid: { hoverable: true, clickable: true }
+        grid: { hoverable: true, clickable: true },
       }
       , bars: {
         series: {
@@ -191,15 +208,19 @@ my.FlotGraph = Backbone.View.extend({
           bars: {
             show: true,
             barWidth: 1,
-          align: "left",
+            align: "center",
             fill: true
           }
         },
+        grid: { hoverable: true, clickable: true },
         xaxis: {
           tickSize: 1,
           tickLength: 1,
+          tickFormatter: tickFormatter
         }
       }
+    }
+    return options[typeId];
   },
 
   setupTooltips: function() {
@@ -220,12 +241,19 @@ my.FlotGraph = Backbone.View.extend({
     var previousPoint = null;
     this.$graph.bind("plothover", function (event, pos, item) {
       if (item) {
-        if (previousPoint != item.dataIndex) {
+        if (previousPoint != item.datapoint) {
-          previousPoint = item.dataIndex;
+          previousPoint = item.datapoint;
           
           $("#flot-tooltip").remove();
-          var x = item.datapoint[0].toFixed(2),
+          var x = item.datapoint[0];
-              y = item.datapoint[1].toFixed(2);
+          var y = item.datapoint[1];
+          // 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.chartConfig.group);
+          } else {
+            x = x.toFixed(2);
+          }
+          y = y.toFixed(2);
           
           var content = _.template('<%= group %> = <%= x %>, <%= series %> = <%= y %>', {
             group: self.chartConfig.group,