Added property `length` holding the total number of items in the DataView

HISTORY.md

@@ -6,7 +6,8 @@ http://visjs.org
 
 ### DataSet
 
-- Added property `length` holding the total number of items in the DataSet.
+- Added property `length` holding the total number of items to the `DataSet`
+  and `DataView`.
 
 
 ## 2015-01-16, version 3.9.1

docs/dataview.html

@@ -20,6 +20,8 @@
   <li><a href="#Overview">Overview</a></li>
   <li><a href="#Example">Example</a></li>
   <li><a href="#Construction">Construction</a></li>
+  <li><a href="#Methods">Methods</a></li>
+  <li><a href="#Properties">Properties</a></li>
   <li><a href="#Getting_Data">Getting Data</a></li>
   <li><a href="#Subscriptions">Subscriptions</a></li>
   <li><a href="#Data_Policy">Data Policy</a></li>
@@ -152,6 +154,106 @@ var data = new vis.DataView(dataset, options)
   </li>
 </ul>
 
+<h2 id="Methods">Methods</h2>
+
+<p>DataView contains the following methods.</p>
+
+<table>
+  <colgroup>
+    <col width="200">
+  </colgroup>
+
+  <tr>
+    <th>Method</th>
+    <th>Return Type</th>
+    <th>Description</th>
+  </tr>
+
+  <tr>
+    <td>
+      get([options] [, data])<br>
+      get(id [,options] [, data])<br>
+      get(ids [, options] [, data])
+    </td>
+    <td>Object | Array | DataTable</td>
+    <td>
+      Get a single item, multiple items, or all items from the DataView.
+      Usage examples can be found in section <a href="#Getting_Data">Getting Data</a>, and the available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>. If parameter <code>data</code> is provided, items will be appended to this array or table, which is required in case of Google DataTable.
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      getDataSet()
+    </td>
+    <td>DataSet</td>
+    <td>
+      Get the DataSet to which the DataView is connected.
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      getIds([options])
+    </td>
+    <td>Number[]</td>
+    <td>
+      Get ids of all items or of a filtered set of items.
+      Available <code>options</code> are described in section <a href="dataset.html#Data_Selection">Data Selection</a>, except that options <code>fields</code> and <code>type</code> are not applicable in case of <code>getIds</code>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>off(event, callback)</td>
+    <td>none</td>
+    <td>
+      Unsubscribe from an event, remove an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>on(event, callback)</td>
+    <td>none</td>
+    <td>
+      Subscribe to an event, add an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      setDataSet(data)
+    </td>
+    <td>none</td>
+    <td>
+      Replace the DataSet of the DataView. Parameter <code>data</code> can be a DataSet or a DataView.
+    </td>
+  </tr>
+
+</table>
+
+
+<h2 id="Properties">Properties</h2>
+
+<p>DataView contains the following properties.</p>
+
+<table>
+  <colgroup>
+    <col width="200">
+  </colgroup>
+
+  <tr>
+    <th>Property</th>
+    <th>Type</th>
+    <th>Description</th>
+  </tr>
+
+  <tr>
+    <td>length</td>
+    <td>Number</td>
+    <td>The number of items in the DataView.</td>
+  </tr>
+</table>
+
 <h2 id="Getting_Data">Getting Data</h2>
 
 <p>
@@ -165,8 +267,8 @@ var items = view.get();
 <p>
   Data of a DataView can be filtered and formatted again, in exactly the
   same way as in a DataSet. See sections
-  <a href="dataset.html#Data_Filtering">Data Filtering</a> and
-  <a href="dataset.html#Data_Formatting">Data Formatting</a> for more
+  <a href="dataset.html#Data_Manipulation">Data Manipulation</a> and
+  <a href="dataset.html#Data_Selection">Data Selection</a> for more
   information.
 </p>
 

lib/DataView.js

@@ -14,6 +14,7 @@ var DataSet = require('./DataSet');
 function DataView (data, options) {
   this._data = null;
   this._ids = {}; // ids of the items currently in memory (just contains a boolean true)
+  this.length = 0; // number of items in the DataView
   this._options = options || {};
   this._fieldId = 'id'; // name of the field containing id
   this._subscribers = {}; // event subscribers
@@ -50,6 +51,7 @@ DataView.prototype.setData = function (data) {
       }
     }
     this._ids = {};
+    this.length = 0;
     this._trigger('remove', {items: ids});
   }
 
@@ -67,6 +69,7 @@ DataView.prototype.setData = function (data) {
       id = ids[i];
       this._ids[id] = true;
     }
+    this.length = ids.length;
     this._trigger('add', {items: ids});
 
     // subscribe to new dataset
@@ -277,6 +280,8 @@ DataView.prototype._onEvent = function (event, params, senderId) {
         break;
     }
 
+    this.length += added.length - removed.length;
+
     if (added.length) {
       this._trigger('add', {items: added}, senderId);
     }

test/DataView.test.js

@@ -28,6 +28,7 @@ describe('DataView', function () {
       {id: 2, content: 'Item 2', group: 2},
       {id: 3, content: 'Item 3', group: 2}
     ]);
+    assert.equal(group2.length, 2);
 
 // test filtering the view contents
     assert.deepEqual(group2.get({
@@ -51,19 +52,46 @@ describe('DataView', function () {
     groups.update({id:2, content: 'Item 2 (changed)'});
     assert.equal(groupsTriggerCount, 1);
     assert.equal(group2TriggerCount, 1);
+    assert.equal(group2.length, 2);
 
     groups.update({id:5, content: 'Item 5 (changed)'});
     assert.equal(groupsTriggerCount, 2);
     assert.equal(group2TriggerCount, 1);
+    assert.equal(group2.length, 2);
 
 // detach the view from groups
     group2.setData(null);
     assert.equal(groupsTriggerCount, 2);
     assert.equal(group2TriggerCount, 2);
+    assert.equal(group2.length, 0);
 
     groups.update({id:2, content: 'Item 2 (changed again)'});
     assert.equal(groupsTriggerCount, 3);
     assert.equal(group2TriggerCount, 2);
+
+    // test updating of .length property
+    group2.setData(groups);
+    assert.equal(group2.length, 2);
+
+    // add a new item
+    groups.add({id: 6, content: 'Item 6', group: 2});
+    assert.equal(group2.length, 3);
+
+    // change an items group to 2
+    groups.update({id: 4, group: 2});
+    assert.equal(group2.length, 4);
+
+    // change an items group to 1
+    groups.update({id: 4, group: 1});
+    assert.equal(group2.length, 3);
+
+    // remove an item
+    groups.remove(2);
+    assert.equal(group2.length, 2);
+
+    // remove all items
+    groups.clear();
+    assert.equal(group2.length, 0);
   });
 
 });