Merge pull request #102 from NuCivic/integration

Integration branch

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.

docs/development/workflows/publish.md

@@ -1,27 +1,39 @@
 # NPM Publication
-**NOTE** that this page relate to internal react-dash development workflows, not to implementations or library usage
+**NOTE** that this page relates to internal react-dash development workflows, not to implementations or library usage
 
 ## Versioning Info
 We use semver http://semver.org/ :
 x.y.z     x = major version (not currently implemented), y = minor version, z = patch version
 minor versions are NOT backward compatible before v1.0.0 (0.7.x is not guaranteed to be backwards compatible with 0.6.x)
 patch versions should maintain backwards compatibility (0.7.2 should be compatible with 0.7.3)
 
-##Workflow
-* Do development
-* Test / QA
-* update changelog
-* `git commit -am "Commit message - includes build"`
-* `git push origin my-dev-branch`
-* Submit PR - include description of work done, include acceptance criteria
-* Confirm that PR is merged, then...
-* `git pull`
-* `npm run build`
-* `git add --force dist/`
-* `git co -b release.x.y.z`
-* `git ci -a`
-* `git br -D release.x.y.z`
-* `npm version patch/minor`
-* `npm publish`
-* `git push --tags`
-* confirm that publication was successful (eg: `npm install [email protected]` then confirm that code updates are valid)
+## Dependencies
+
+1. Set up an account on npm
+1. Get added as maintainer on https://www.npmjs.com/package/react-dash and on the github repository
+1. Identify the next release based on semantic versioning, in the form of `x.y.z`
+1. Verify you have the appropriate git remotes, both an `origin` for your fork and an `upstream` for the React Dash repository
+1. A GPG key setup in github. How to generate a GPG key: https://help.github.com/articles/generating-a-new-gpg-key/
+
+
+## Creating a new release
+
+** All dev branches should be pushed to and tested in the integration branch. Each dev branch should contain changelog.md notes of changes made/features added in the ticket.
+
+1. After all the dev branches slated for release have been merged into integration , confirm that the updates in the changelog from individual branches completely describes the new release.
+1. In ReactDashboard.js, update the version number in the console.log statement (line 2, for now) to reflect the react-dash version that you are about release. `console.log('React Dashboard -- 0.7.2');`
+1. Check the status of your local repository for any unwanted changes: `git status` (please note: you should not have any unexpected local changes that have not been code reviewed within a pull request)
+1. Commit the changelog and any final changes: `git commit -a -m "Changelog for the [x.y.z] release"` (please substitute x.y.z for the new release)
+1. Verify that you are in the integration branch: `git branch -v`. 
+1. If you are not on the master branch, please merge your current branch (which should be your release candidate) into master: `git checkout master && git merge [branch from previous step]` (please substitute the [branch from previous step] with the output from the aforementioned branch verification step)
+1. Update the version of the package: `npm version [ patch | minor ]` (please substitute specifically with the word `patch` or `minor`).
+   **NOTE:** This step cannot be successfully completed without an existing GPG key in github.
+1. Publish the package: `npm publish`
+1. Commit the package and tag: `git commit -a -m "Package info for the [x.y.z] release" && git push upstream master --tags` (please substitute x.y.z for the new release)
+1. Go to the github releases page, confirm that the `npm publish` step created a new release from the x.y.z tag.
+
+## Release verification
+
+Confirm that publication was successful (eg: `npm install [email protected]` then confirm that code updates are valid)
+
+maintain backwards compatibility (0.7.2 should be compatible with 0.7.3)

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/index.html

@@ -6,6 +6,7 @@
     <link rel="stylesheet" type="text/css" href="static/react-dash-demo.min.css">
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
+  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <body>
     <div id='root'>
     </div>

examples/index.js

@@ -1,4 +1,3 @@
-import 'bootstrap/dist/css/bootstrap.min.css';
 import './nv.d3.min.css';
 import 'react-select/dist/react-select.min.css';
 import 'fixed-data-table/dist/fixed-data-table.min.css';

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,21 +338,21 @@ export var settings = {
           ]
         }
       ]
-    }
+    }        
   ]
 };
 
 
 let climateVars = {
-      PCP: 'Precipitation Index',
-      TAVG: 'Temperature Index',
-      TMIN: 'Minimum Temperature Index',
-      TMAX: 'Maximum Temperature Index',
-      PDSI: 'Palmer Drought Severity Index',
-      PHDI: 'Palmer Hydrological Drought Index',
-      ZNDX: 'Palmer Z-Index',
-      PMDI: 'Modified Palmer Drought Severity Index',
-      CDD: 'Cooling Degree Days',
-      HDD: 'Heating Degree Days',
-      SPnn: 'Standard Precipitation Index'
-    };
+			PCP: 'Precipitation Index',
+			TAVG: 'Temperature Index',
+			TMIN: 'Minimum Temperature Index',
+			TMAX: 'Maximum Temperature Index',
+			PDSI: 'Palmer Drought Severity Index',
+			PHDI: 'Palmer Hydrological Drought Index',
+			ZNDX: 'Palmer Z-Index',
+			PMDI: 'Modified Palmer Drought Severity Index',
+			CDD: 'Cooling Degree Days',
+			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%;}