Merge pull request #101 from NuCivic/filterHandler

Add Filter handler

docs/development/components/DataTable.md

@@ -9,6 +9,7 @@ Here's an example of the configuration:
 
 ```eval_rst
 .. literalinclude:: ../../../examples/js_static_example/settings.js 
+    :language: javascript
     :start-after: start DataTable Example
     :end-before: end DataTable Example
     :dedent: 4
@@ -29,6 +30,7 @@ Here's an example of the configuration:
   - **overrides.rows**
   - **overrides.cells**
 
-** DATA **
+**DATA**
+
 Data should be in the format given in the example above. The first row of data will be used as headers.
 

docs/development/data/datahandlers.md

@@ -8,17 +8,19 @@ Consider the following dataHandler configuration for a chart component:
 
 ```eval_rst
 .. literalinclude:: ../../../examples/settings.js
-    :start-after: start dataHandler example
-    :end-before: end dataHandler example
-    :dedent: 4
+   :language: javascript
+   :emphasize-lines: 215-216 
+   :dedent: 4
+   :lines: 205-230 
 ```
 
 And following is the implmentation of the dataHandler function. It recieves the indicators array and colors array from the handler element, and uses them to generate the barChart data series.
 
 ```eval_rst
 .. literalinclude:: ../../../examples/customDataHandlers.js
-    :start-after: start dataHandler example
-    :end-before: end dataHandler example
+   :language: javascript
+   :dedent: 2
+   :lines: 62-86 
 ```
 
 ## datahandler arguments
@@ -45,7 +47,7 @@ A global property of the dashboard which indicates what filters are applied at t
 ```
 
 ### pipelineData
-If datahandlers are chained, then *pipelineData* will be the return value of the previous datahandler in the chain. See [chaining](below)
+If datahandlers are chained, then *pipelineData* will be the return value of the previous datahandler in the chain. See [chaining](#chaining)
 
 ## chaining
 If the component.props.dataHandlers array has more than one datahandler then the return value from the first handler will be passed as *pipelineData* to subsequent handlers, in this way composition of components is possible, etc.

docs/development/data/filterhandlers.md

@@ -0,0 +1,46 @@
+# Filter Handlers
+Filter handlers are similar to Data Handlers but are fired before the the data is fetched. This allows the ability to change the values which are used to filter the data.
+
+## filterHandler definition
+
+Filter handlers are declared in the ``settings.json`` file similar to data handlers. A key is required which is the filter for which the values will be altered. The value is the function which will return the altered values:
+
+```javascript
+filterHandlers: [
+  {
+    "filterToUpdate": "functionToFilterValues" 
+  }
+],
+```
+
+And following is the implmentation of the filterHandler function. It receives the .
+
+```javascript
+functionToFilterValues: (componentData, dashboardData, handler, filter, state, payload) => {
+  // Get current values.
+  const vals = filter.vals;
+  // Do logic to get different values;
+  const newVals = functionThatGetsNewVals(vals);
+  return newVals;
+}
+```
+
+## datahandler arguments
+
+### componentData
+Data set on the component as this.state.data - this could come from a fetch call, be passed as props, or through some novel method on a custom component.
+
+### dashboardData 
+Also referred to as globalData - this is the data available to the entire dashboard
+
+### handler
+The handler as deffined in settings.js. Any properties set on the handler are available as `handler.foo`, etc
+
+### filter 
+The filter to which values are being updated.
+
+### state 
+Current app state.
+
+### payload
+The update event that comes from a filter component.

docs/development/data/index.rst

@@ -6,4 +6,5 @@ Data Handling
     overview
     datahandlers
     statehandlers
+    filterhandlers
     backends

docs/development/data/statehandlers.md

@@ -8,17 +8,19 @@ Consider the following stateHandler configuration for a chart component:
 
 ```eval_rst
 .. literalinclude:: ../../../examples/settings.js
-    :start-after: start stateHandler example
-    :end-before: end stateHandler example
+    :language: javascript
+    :emphasize-lines: 216-221 
     :dedent: 4
+    :lines: 205-230 
 ```
 
 The *stateHandler* should return a literal value, which will be applied the state using the handlers *attribute* property. When looking up props, the component checks the state first, and if that prop is set on the state, will use that instead, allowing the state to override props on a case-by-case basis, using *stateHandler.attribute* 
 
 ```eval_rst
 .. literalinclude:: ../../../examples/customStateHandlers.js
-    :start-after: start stateHandler example
-    :end-before: end stateHandler example
+    :language: javascript
+    :dedent: 2
+    :lines: 17-23 
 ```
 
 ## Attributes

docs/development/intro.md

@@ -8,6 +8,8 @@ You can define a dashboard using familiar JSX syntax. Following is a complete ex
 
 ```eval_rst
 .. literalinclude:: ../../examples/jsx_static_example/app.js 
+   :language: javascript
+   :lines: 10-
 ```
 
 ## Javascript Settings object 
@@ -17,6 +19,7 @@ In many cases it is useful to define dashboard configuration in JSON - allowing
 
 ```eval_rst
 .. literalinclude:: ../../examples/js_static_example/app.js 
+   :language: javascript
 ```
 
 ## Complete Dashboard Application
@@ -27,10 +30,10 @@ The app at `/examples/app.js` runs an example of a more robust application with
 ## Boilerplate project
 The boilerplate module includes the above application in a complete development environment suitable for doing dashbaord development.
 
-`git clone https://github.com/NuCivic/react-dash-boilerplate.git`
-`cd react-dash-boilerplate`
-`npm install`
-`npm run init`
-`npm run start`
+    git clone https://github.com/NuCivic/react-dash-boilerplate.git
+    cd react-dash-boilerplate
+    npm install
+    npm run init
+    npm run start
 
 This will spin up the example application, and you can use it as a starting point for developing your own app.

docs/development/settings.js.md

@@ -5,6 +5,7 @@ A simple example:
 
 ```eval_rst
 .. literalinclude:: ../../examples/js_static_example/settings.js 
+   :language: javascript
 ```
 
 ## Regions

examples/settings.js

@@ -189,15 +189,15 @@ export var settings = {
           legend: {
             classesCount: 5,
             pallete:
-							[
-								"#e6ffff",
-								"#00ffff",
-								"#00cccc",
-								"#00b3b3",
-								"#009999",
-								"#008080",
-								"#004d4d"
-							]
+              [
+                "#e6ffff",
+                "#00ffff",
+                "#00cccc",
+                "#00b3b3",
+                "#009999",
+                "#008080",
+                "#004d4d"
+              ]
           },
         },
       ]
@@ -256,15 +256,15 @@ 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'
+    };

src/ReactDashboard.js

@@ -25,6 +25,7 @@ export {default as Region} from './components/Region';
 export {default as Registry } from './utils/Registry';
 export {default as DataHandler } from './utils/DataHandler';
 export {default as StateHandler } from './utils/StateHandler';
+export {default as FilterHandler } from './utils/FilterHandler';
 export * from './utils/utils';
 
 // MODELS
@@ -37,4 +38,3 @@ export {default as DashboardConstants} from './constants/DashboardConstants';
 
 // DATAHANDLERS
 export {default as DataHandlers} from './datahandlers/index';
-

src/components/BaseComponent.js

@@ -76,7 +76,7 @@ export default class BaseComponent extends Component {
     let newState = {};
 
     if (this.props.stateHandlers && this.props.stateHandlers.length > 0) {
-      let handledState = StateHandler.handle(this.props.stateHandlers, this.props.data, this.state.dashboardData);
+      let handledState = StateHandler.handle(this.props.stateHandlers, this.props.data, this.props.globalData, this.props.appliedFilters);
       newState = Object.assign(newState, handledState);
     }