Merge pull request #96 from alexiscott/integration

 Integrating the DataTables JS library

CHANGELOG.md

@@ -1,3 +1,7 @@
+0.7.3 2017-12-13
+----------------
+- Add DataTables jQuery plugin for displaying tables
+
 0.7.2 2017-10-23
 ----------------
 - Pin React version to v.15.6.2 pending a v.2.0.0 release which should support React v.16.

examples/customDataHandlers.js

@@ -1,5 +1,5 @@
 import { DataHandler } from '../src/ReactDashboard'
-import { find, min, max, mean, isArray } from 'lodash';
+import { find, min, max, mean, isArray, startsWith, chain, forEach, groupBy, map} from 'lodash';
 
 let customDataHandlers = {
   getClimateMetric: function (componentData, dashboardData, handler, e, appliedFilters, pipelineData) {
@@ -11,7 +11,7 @@ let customDataHandlers = {
         output = data.map(r => { return r.TMIN });
         return [min(output)]
       }
-      
+
       if (handler.field === 'TMAX') {
         output = data.map(r => { return r.TMAX });
         return [max(output)]
@@ -24,7 +24,7 @@ let customDataHandlers = {
         return [n];
       }
     }
-    
+
     return ["..."];
   },
 
@@ -34,24 +34,24 @@ let customDataHandlers = {
     let NaNRows = {};
     let _data = dashboardData.climateData;
     let mapped;
-    
+
     if (_data && _data.length > 0) {
       mapped = _data.map(row => {
-        
+
         Object.keys(row).forEach((k) => {
           row[k] = Number(row[k]);
           if (row[k] === -99.99 )  row[k] = 0; // not sure the cause of this but ain't got time to sort it out
         });
 
         // assign label from stateArray to row, based on matching id
         let state = find(handler.stateArray, r => {
-         return ( r.value === row.StateCode ) 
+          return ( r.value === row.StateCode )
         });
 
         if (state) {
           row.name = state.label;
         }
-        
+
         return row;
       });
     }
@@ -85,13 +85,51 @@ let customDataHandlers = {
     return series;
   },
 
+
+
+  // @TODO use data with dashboardData.
   getTableData: function (componentData, dashboardData, handler, e, appliedFilters, pipelineData) {
-    console.log(arguments);
-    if (dashboardData.climateData) {
-      return dashboardData.climateData;
+
+    // Get data.
+    const data = dashboardData.climateData || [];
+
+    if (data.length < 1) return ["..."];
+
+    // Function to get just the year from a year/month string.
+    const yToStr = item => {
+      return item.YearMonth.toString().substring(0, 4);
+    };
+
+    // Sum
+    function sum(a, b) {
+      a += b;
+      return a;
     }
+
+    // First group data by year.
+    let byYearData = chain(data)
+        .groupBy(yToStr)
+        .value();
+
+
+    // Then calculate averages for yearly data.
+    let yearlyAveragesData = [];
+    let minTotal = 0;
+    let maxTotal = 0;
+    forEach(byYearData, function(d, year) {
+      let o = {};
+      let max = 0;
+      o.year = year;
+      minTotal = (map(d, 'TMIN').reduce(sum));
+      maxTotal =(map(d, 'TMAX').reduce(sum));
+      o.min = Math.round(minTotal / d.length);
+      o.max = Math.round(maxTotal / d.length);
+      yearlyAveragesData.push(o);
+    });
+
+    return [yearlyAveragesData];
   }
-}
+};
 
 for (let k in customDataHandlers) {
   DataHandler.set(k, customDataHandlers[k]);

examples/settings.js

@@ -1,4 +1,3 @@
-
 let stateIds =
       [
         { value: 1, label: 'AK' },
@@ -228,13 +227,102 @@ export var settings = {
         }
       ]
     },
+    {
+      id: 'fixed-data-table-row',
+      className: 'row',
+      children: [
+        {
+          type: 'DataTable',
+          dataHandlers: [
+            {
+              name: 'getTableData'
+            },
+          ],
+          key: 'fixed-data-table-row',
+          header: 'Fixed Data Table 2',
+          iconClass: 'fa fa-database',
+          cardStyle: 'table',
+          cardClasses: ['col-md-12', 'climate-data'],
+          hideControls: true,
+          hideFilterHeader: true,
+          settings: {
+            table: {
+              rowHeight: 60,
+              width: '100%',
+              maxHeight: 300,
+              headerHeight:60
+            },
+            columns: {
+              flexGrow: 1,
+              width: 150,
+            },
+          },
+          overrides: {
+            rows: {
+              "max": {
+                className: 'yelloW'
+              }
+            },
+            columns: {
+              "max": {
+                className: 'greenCell'
+              }
+            },
+            cells: {
+              "min_3": {
+                className: 'greenCell'
+              }
+            }
+          }
+        },
+
+      ]
+    },
+    {
+      id: 'datatable-row',
+      className: 'row',
+      children: [
+        {
+          type: 'ResponsiveDataTable',
+          dataHandlers: [
+            {
+              name: 'getTableData'
+            },
+          ],
+          key: 'datatables-row',
+          header: 'Responsive DataTables',
+          iconClass: 'fa fa-database',
+          cardStyle: 'table',
+          cardClasses: ['col-md-12', 'climate-data'],
+          overrides: {
+            rows: {
+              "max": {
+                className: 'yelloW'
+              }
+            },
+            columns: {
+              "max": {
+                className: 'greenCell'
+              }
+            },
+            cells: {
+              "min_3": {
+                className: 'greenCell'
+              }
+            }
+          }
+        },
+
+      ]
+    },    
     {
       id: 'highlight-row',
       className: 'row',
       children: [
         {
           type: 'Highlight',
           key: 'highlight1',
+          header: 'Highlight',
           data: [
             {
               cols: [
@@ -250,7 +338,7 @@ export var settings = {
           ]
         }
       ]
-    }
+    }        
   ]
 };
 
@@ -268,3 +356,4 @@ let climateVars = {
 			HDD: 'Heating Degree Days',
 			SPnn: 'Standard Precipitation Index'
 		};
+

examples/static/custom.css

@@ -15,5 +15,8 @@ border-radius: 12px 12px 12px 12px;margin:.2em; cursor:pointer;background-color:
 
 .red {background-color:red}
 .yelloW {background-color:yellow}
-.greenCell {background-color:green; border: 1px solid white}
+.greenCell {background-color:#98FB98}
 
+
+/* DataTables */
+.data-table-wrapper table {width: 100%;}