Incorporated feedback from PR #560 to alter Object formatting for col…

…umns and add jasmine tests
dc-js · Aug 8, 2014 · a208a90 · a208a90
1 parent 3501065
commit a208a90
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 20 deletions.
diff --git a/spec/data-table-spec.js b/spec/data-table-spec.js
@@ -101,6 +101,53 @@ describe('dc.dataTable', function() {
         });
     });
 
+    describe('columns', function(){
+       it('specifying chart columns with label should render value and capitalized header', function(){
+         chart.columns(["state"]);
+         chart.render();
+         var cols = chart.selectAll("td.dc-table-column")[0].map(function(d){return d.innerText;});
+         var expected = ["Mississippi", "Mississippi", "Delaware"];
+         expect(cols.length).toEqual(expected.length);
+         expected.forEach(function(d){
+             expect(cols).toContain(d);
+         });
+         var colheader = chart.selectAll("th.dc-table-head")[0].map(function(d){return d.innerText;});
+         expect(colheader.length).toEqual(1);
+         expect(colheader[0]).toEqual("State");
+
+       }); 
+     it('specifying chart columns with function should render function result and no header', function(){
+        chart.columns([function(d){return "" + d.id + 'test';}]);
+        chart.render();
+         var cols = chart.selectAll("td.dc-table-column")[0].map(function(d){return d.innerText;});
+         var expected = ["9test", "8test", "3test"];
+         expect(cols.length).toEqual(expected.length);
+         expected.forEach(function(d){
+             expect(cols).toContain(d);
+         });
+         var colheader = chart.selectAll("th.dc-table-head")[0].map(function(d){return d.innerText;});
+         expect(colheader.length).toEqual(0);
+     });
+     it('specifying chart columns with object should render result of calling function with field and header for label', function(){
+        chart.columns([{
+            label: "Test ID",
+            format: function(d){
+                return "test" + d.id;
+            }
+        }]);
+        chart.render();
+        var cols = chart.selectAll("td.dc-table-column")[0].map(function(d){return d.innerText;});
+        var expected = ["test9", "test8", "test3"];
+        expect(cols.length).toEqual(expected.length);
+        expected.forEach(function(d){
+            expect(cols).toContain(d);
+        });
+        var colheader = chart.selectAll("th.dc-table-head")[0].map(function(d){return d.innerText;});
+        expect(colheader.length).toEqual(1);
+        expect(colheader[0]).toEqual("Test ID");
+     });
+    });
+
     afterEach(function() {
         dimension.filterAll();
         countryDimension.filterAll();

diff --git a/src/data-table.js b/src/data-table.js
@@ -51,7 +51,7 @@ dc.dataTable = function(parent, chartGroup) {
                 v(d) :                          // v as function
                 ((typeof v === 'string') ? 
                  d[v] :                         // v is field name string
-                 v[1](d)                        // v is Object, use fn (element 2)
+                 v.format(d)                        // v is Object, use fn (element 2)
                 )
                );
     }
@@ -63,7 +63,7 @@ dc.dataTable = function(parent, chartGroup) {
         return (typeof d === 'function') ? 
                 _chart._doColumnHeaderFnToString(d) :
                 ((typeof d === 'string') ? 
-                 _chart._doColumnHeaderCapitalize(d) : String(d[0]) );
+                 _chart._doColumnHeaderCapitalize(d) : String(d.label) );
     }
 
     _chart._doColumnHeaderCapitalize = function(s) {

diff --git a/web/stock.js b/web/stock.js
@@ -571,38 +571,38 @@ d3.csv("ndx.csv", function (data) {
                 "date",    // d["date"], ie, a field accessor; capitalized automatically
                 "open",    // ...
                 "close",   // ...
-                [ "CHange", // desired format of column name "Change" when used as a label with a function.
+                { label: "CHange", // desired format of column name "Change" when used as a label with a function.
                                                            // 'H' purposely capitalized for visual confirmation of sub
-                      function (d) {
+                    format: function (d) {
                           return numberFormat(d.close - d.open);
-                      }],
+                      }},
                 "volume"   // d["volume"], ie, a field accessor; capitalized automatically
         ];
     }
 
     function columnsWithMixedFormat2()    // could be formatting during earlier step (load)
     {
         return [
-                [ "Date",    // desired format of column name "Date" when used as a label with a function.
-                      function (d) {
+                { label: "Date",    // desired format of column name "Date" when used as a label with a function.
+                    format: function (d) {
                           return d.date;
-                      }],
-                [ "Open",
-                      function (d) {
+                      }},
+                { label: "Open",
+                    format: function (d) {
                           return numberFormat(d.open);
-                      }],
-                [ "Close",
-                      function (d) {
+                      }},
+                { label: "Close",
+                    format: function (d) {
                           return numberFormat(d.close);
-                      }],
-                [ "ChAnge",  // 'A' purposely capitalized for visual confirmation of sub
-                      function (d) {
+                      }},
+                { label: "ChAnge",  // 'A' purposely capitalized for visual confirmation of sub
+                    format: function (d) {
                           return numberFormat(d.close - d.open);
-                      }],
-                [ "Volume",
-                      function (d) {
+                      }},
+                { label: "Volume",
+                    format: function (d) {
                           return d.volume;
-                      }],
+                      }},
         ];
     }