auto_tests/tests/gviz.js

   1 /**
   2  * Unit tests for GViz data table support.
   3  */
   4
   5 describe('gviz', function() {
   6
   7   beforeEach(function() {
   8     document.body.innerHTML = "<div id='graph'></div>";
   9   });
  10
  11   afterEach(function() {
  12   });
  13
  14   // This is a fake version of the gviz DataTable API, which can only be
  15   // sourced using the google js loader.
  16   //
  17   // Their example of the "data" structure is:
  18   //   cols: [{id: 'task', label: 'Task', type: 'string'},
  19   //          {id: 'hours', label: 'Hours per Day', type: 'number'}],
  20   //   rows: [{c:[{v: 'Work'}, {v: 11}]},
  21   //          {c:[{v: 'Eat'}, {v: 2}]},
  22   //          {c:[{v: 'Commute'}, {v: 2}]},
  23   //          {c:[{v: 'Watch TV'}, {v:2}]},
  24   //          {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}
  25   //         ]
  26   //
  27   // https://developers.google.com/chart/interactive/docs/reference#DataTable
  28   var FakeDataTable = function(data) {
  29     this.data = data;
  30   };
  31   FakeDataTable.prototype.getNumberOfColumns = function() {
  32     return this.data.cols.length;
  33   };
  34   FakeDataTable.prototype.getNumberOfRows = function() {
  35     return this.data.rows.length;
  36   };
  37   FakeDataTable.prototype.getColumnType = function(idx) {
  38     return this.data.cols[idx].type;
  39   };
  40   FakeDataTable.prototype.getColumnLabel = function(idx) {
  41     return this.data.cols[idx].label;
  42   };
  43   FakeDataTable.prototype.getValue = function(row, col) {
  44     return this.data.rows[row].c[col].v;
  45   };
  46   FakeDataTable.prototype.getColumnRange = function(col) {
  47     throw 'Not Implemented';
  48   };
  49
  50   // This mirrors http://dygraphs.com/tests/gviz.html
  51   var numericData = new FakeDataTable({
  52     cols: [{id:"",label:"X",type:"number"},
  53            {id:"",label:"A",type:"number"},
  54            {id:"",label:"B",type:"number"}],
  55     rows: [{c:[{v:0},{v:1},{v:7}]},
  56            {c:[{v:1},{v:2},{v:4}]},
  57            {c:[{v:2},{v:3},{v:3}]},
  58            {c:[{v:3},{v:4},{v:0}]}]
  59   });
  60
  61   it('should parse simple data tables', function() {
  62     var g = new Dygraph('graph', numericData);
  63     assert.equal(4, g.numRows());
  64     assert.equal(3, g.numColumns());
  65     assert.equal(0, g.getValue(0, 0));
  66     assert.equal(1, g.getValue(0, 1));
  67     assert.equal(7, g.getValue(0, 2));
  68     assert.equal(3, g.getValue(3, 0));
  69     assert.equal(4, g.getValue(3, 1));
  70     assert.equal(0, g.getValue(3, 2));
  71     assert.deepEqual(['X', 'A', 'B'], g.getLabels());
  72   });
  73
  74   it('should parse tables with annotations', function() {
  75     // Data from https://developers.google.com/chart/interactive/docs/gallery/annotatedtimeline
  76     var data = new FakeDataTable({
  77       cols: [
  78         {label: "Date", type: "date" },
  79         {label: "Sold Pencils", type: "number" },
  80         {label: "title1", type: "string" },
  81         {label: "text1", type: "string" },
  82         {label: "Sold Pens", type: "number" },
  83         {label: "title2", type: "string" },
  84         {label: "text2", type: "string" }
  85       ],
  86       rows: [
  87         {c: [{v: new Date(2008, 1, 1)}, {v: 30000}, {v: null}, {v: null},
  88              {v: 40645}, {v: null}, {v: null}]},
  89         {c: [{v: new Date(2008, 1, 2)}, {v: 14045}, {v: null}, {v: null},
  90              {v: 20374}, {v: null}, {v: null}]},
  91         {c: [{v: new Date(2008, 1, 3)}, {v: 55022}, {v: null}, {v: null},
  92              {v: 50766}, {v: null}, {v: null}]},
  93         {c: [{v: new Date(2008, 1, 4)}, {v: 75284}, {v: null}, {v: null},
  94              {v: 14334}, {v: "Out of Stock"}, {v: "Ran out of stock"}]},
  95         {c: [{v: new Date(2008, 1, 5)}, {v: 41476}, {v: "Bought Pens"},
  96              {v: "Bought 200k pens" }, {v: 66467}, {v: null}, {v: null}]},
  97         {c: [{v: new Date(2008, 1, 6)}, {v: 33322}, {v: null}, {v: null},
  98              {v: 39463}, {v: null}, {v: null}]}
  99       ]
 100     });
 101
 102     var g = new Dygraph('graph', data, {displayAnnotations: true});
 103
 104     var annEls = document.getElementsByClassName('dygraphDefaultAnnotation');
 105     assert.equal(2, annEls.length);
 106
 107     var annotations = g.annotations();
 108     assert.equal(2, annotations.length);
 109     var a0 = annotations[0];
 110     assert.deepEqual({
 111       text: 'Out of Stock\nRan out of stock',
 112       series: 'Sold Pens',
 113       xval: new Date(2008, 1, 4).getTime(),
 114       shortText: 'A'
 115     }, annotations[0]);
 116   });
 117
 118   it('should parse tables with dates', function() {
 119     // This mirrors http://dygraphs.com/tests/gviz.html
 120     var data = new FakeDataTable({
 121       cols: [{id:"",label:"Date",type:"datetime"},
 122              {id:"",label:"Column A",type:"number"},
 123              {id:"",label:"Column B",type:"number"}],
 124       rows: [{c:[{v:new Date(2009, 6, 1)},{v:1},{v:7}]},
 125              {c:[{v:new Date(2009, 6, 8)},{v:2},{v:4}]},
 126              {c:[{v:new Date(2009, 6, 15)},{v:3},{v:3}]},
 127              {c:[{v:new Date(2009, 6, 22)},{v:4},{v:0}]}]
 128     });
 129
 130     var g = new Dygraph('graph', data);
 131     assert.equal(4, g.numRows());
 132     assert.equal(3, g.numColumns());
 133     assert.equal(new Date(2009, 6, 1).getTime(), g.getValue(0, 0));
 134     assert.equal(1, g.getValue(0, 1));
 135     assert.equal(7, g.getValue(0, 2));
 136     assert.deepEqual(['Date', 'Column A', 'Column B'], g.getLabels());
 137   });
 138
 139   // it('should parse tables with error bars', function() {
 140   // });
 141
 142   it('should implement the gviz API', function() {
 143     var g = new Dygraph.GVizChart(document.getElementById('graph'));
 144     g.draw(numericData);
 145
 146     g.setSelection([{row: 0}]);
 147     assert.equal('0: A: 1 B: 7', Util.getLegend());
 148     assert.deepEqual([{row: 0, column: 1}, {row: 0, column: 2}], g.getSelection());
 149     g.setSelection([]);
 150     assert.deepEqual([], g.getSelection());
 151   });
 152 });