Merge pull request #11 from JoshMock/ref-table

Ref table

diff --git a/src/graphing/ref-table.js b/src/graphing/ref-table.js
new file mode 100644 (file)
index 0000000..6adaade
--- /dev/null
+++ b/src/graphing/ref-table.js
@@ -0,0 +1,70 @@
+tr.graphing.RefTable = function (radar) {
+  var self = {};
+  var injectionElement;
+
+  function blipsByCycle () {
+    // set up empty blip arrays for each cycle
+    var cycles = {};
+    radar.cycles()
+      .map(function (cycle) {
+        return {
+          order: cycle.order(),
+          name: cycle.name()
+        };
+      })
+      .sort(function (a, b) {
+        if (a.order === b.order) {
+          return 0;
+        } else if (a.order < b.order) {
+          return -1;
+        } else {
+          return 1;
+        }
+      })
+      .forEach(function (cycle) {
+        cycles[cycle.name] = [];
+      });
+
+    // group blips by cycle
+    var blips = [];
+    var quadrants = radar.quadrants();
+    Object.keys(quadrants).forEach(function (quadrant) {
+        blips = blips.concat(quadrants[quadrant].blips());
+    });
+
+    blips.forEach(function (blip) {
+      cycles[blip.cycle().name()].push(blip);
+    });
+
+    return cycles;
+  }
+
+  self.init = function (selector) {
+    injectionElement = document.querySelector(selector || 'body');
+    return self;
+  };
+
+  self.render = function () {
+    var blips = blipsByCycle();
+
+    var html = '<table class="radar-ref-table">';
+
+    Object.keys(blips).forEach(function (cycle) {
+        html += '<tr class="radar-ref-status-group"><td colspan="3">' + cycle + '</td></tr>';
+
+        blips[cycle].forEach(function (blip) {
+          html += '<tr>' +
+                    '<td>' + blip.number() + '</td>' +
+                    '<td>' + blip.name() + '</td>' +
+                    '<td>' + blip.description() + '</td>' +
+                  '</tr>';
+        });
+    });
+
+    html += '</table>';
+
+    injectionElement.innerHTML = html;
+  };
+
+  return self;
+};

diff --git a/src/models/blip.js b/src/models/blip.js
index 42257c5..1203caf 100644 (file)
--- a/src/models/blip.js
+++ b/src/models/blip.js
@@ -1,4 +1,4 @@
-tr.models.Blip = function (name, cycle, isNew) {
+tr.models.Blip = function (name, cycle, isNew, description) {
   var self, number;
 
   self = {};
@@ -8,6 +8,10 @@ tr.models.Blip = function (name, cycle, isNew) {
     return name;
   };
 
+  self.description = function () {
+    return description || '';
+  };
+
   self.isNew = function () {
     return isNew;
   };

diff --git a/src/stylesheets/base.scss b/src/stylesheets/base.scss
index b68ca02..a6fbd7d 100644 (file)
--- a/src/stylesheets/base.scss
+++ b/src/stylesheets/base.scss
@@ -46,3 +46,28 @@ svg {
     }
   }
 }
+
+.radar-ref-table {
+  width: 1080px;
+  font-size: 16px;
+  line-height: 26px;
+  padding: 20px;
+
+  tr:nth-child(odd) {
+    background: $grey-darkest;
+  }
+
+  tr:nth-child(even) {
+    background: $grey;
+  }
+
+  td {
+    padding: 10px 15px;
+  }
+
+  tr.radar-ref-status-group {
+    font-size: 20px;
+    font-weight: bold;
+    background: $grey-lightest;
+  }
+}

diff --git a/test/graphing/ref-table-spec.js b/test/graphing/ref-table-spec.js
new file mode 100644 (file)
index 0000000..cdcc531
--- /dev/null
+++ b/test/graphing/ref-table-spec.js
@@ -0,0 +1,69 @@
+describe('tr.graphing.RefTable', function () {
+    var radar, toolsQuadrant, techniquesQuadrant, platformsQuadrant, languageFramework, element;
+
+    beforeEach(function () {
+        toolsQuadrant = new tr.models.Quadrant('Tools');
+        techniquesQuadrant = new tr.models.Quadrant('Techniques');
+        platformsQuadrant = new tr.models.Quadrant('Platforms');
+        languageFramework = new tr.models.Quadrant('Languages');
+
+        radar = new tr.models.Radar();
+        radar.setFirstQuadrant(toolsQuadrant);
+        radar.setSecondQuadrant(techniquesQuadrant);
+        radar.setThirdQuadrant(platformsQuadrant);
+        radar.setFourthQuadrant(languageFramework);
+
+        element = { innerHTML: '' };
+        spyOn(document, 'querySelector').andReturn(element);
+    });
+
+    describe('render', function () {
+        it("groups blips by cycle", function () {
+            var adopt = new tr.models.Cycle('Adopt');
+            var assess = new tr.models.Cycle('Assess');
+
+            toolsQuadrant.add([
+                new tr.models.Blip('foo', adopt, true, 'this is foo'),
+                new tr.models.Blip('bar', assess, true, 'this is bar'),
+                new tr.models.Blip('baz', adopt, true, 'this is baz')
+            ]);
+
+            var table = new tr.graphing.RefTable(radar);
+            table.init('#some-id').render();
+
+            expect(element.innerHTML).toEqual(
+                '<table class="radar-ref-table">' +
+                    '<tr class="radar-ref-status-group"><td colspan="3">Adopt</td></tr>' +
+                    '<tr><td>-1</td><td>foo</td><td>this is foo</td></tr>' +
+                    '<tr><td>-1</td><td>baz</td><td>this is baz</td></tr>' +
+                    '<tr class="radar-ref-status-group"><td colspan="3">Assess</td></tr>' +
+                    '<tr><td>-1</td><td>bar</td><td>this is bar</td></tr>' +
+                '</table>');
+        });
+
+        it("respects the assigned order of cycles", function () {
+            var adopt = new tr.models.Cycle('Adopt', 1);
+            var assess = new tr.models.Cycle('Assess', 3);
+            var hold = new tr.models.Cycle('Hold', 2);
+
+            toolsQuadrant.add([
+                new tr.models.Blip('foo', adopt, true, 'this is foo'),
+                new tr.models.Blip('bar', assess, true, 'this is bar'),
+                new tr.models.Blip('baz', hold, true, 'this is baz')
+            ]);
+
+            var table = new tr.graphing.RefTable(radar);
+            table.init('#some-id').render();
+
+            expect(element.innerHTML).toEqual(
+                '<table class="radar-ref-table">' +
+                    '<tr class="radar-ref-status-group"><td colspan="3">Adopt</td></tr>' +
+                    '<tr><td>-1</td><td>foo</td><td>this is foo</td></tr>' +
+                    '<tr class="radar-ref-status-group"><td colspan="3">Hold</td></tr>' +
+                    '<tr><td>-1</td><td>baz</td><td>this is baz</td></tr>' +
+                    '<tr class="radar-ref-status-group"><td colspan="3">Assess</td></tr>' +
+                    '<tr><td>-1</td><td>bar</td><td>this is bar</td></tr>' +
+                '</table>');
+        });
+    });
+});