[graphs][m]: Handles adding/removing lines from grphs, using redux st…

…ore and reducer.

Includes mocked reducer to handle that action.
Includes more mocked data for store to choose from - refs #15

src/components/CountryPerformanceOnRisk.js

@@ -23,37 +23,55 @@ export class CountryPerformanceOnRisk extends Component {
   }
 
 
-  computeState() {
+  computeState(props=this.props) {
 
     let state = {
-      data: this.props.data,
-      graphOptions: this.props.graphOptions,
-      countries: this.props.countries,
-      defaultCountry: this.props.defaultCountry,
+      data: props.data,
+      graphOptions: props.graphOptions,
+      countries: props.countries,
+      defaultCountry: props.defaultCountry,
     }
     return state
   }
 
 
   componentDidMount() {
-    this.setState(this.computeState())
+    this.setState(this.computeState(this.props))
   };
 
+  componentWillReceiveProps(nextProps) {
+    this.setState(this.computeState(nextProps))
+  }
 
   updateValue1(newCountry) {
-
+    if (newCountry) {
+      this.props.dispatch({type: "addRemoveLine", id: newCountry.value + '1', idx: 2})
+    } else {
+      this.props.dispatch({type: "addRemoveLine", id: newCountry, idx: 2})
+    }
     this.setState({
       selected1: newCountry
+
     })
   }
 
   updateValue2(newCountry) {
+    if (newCountry) {
+      this.props.dispatch({type: "addRemoveLine", id: newCountry.value + '1', idx: 3})
+    } else {
+      this.props.dispatch({type: "addRemoveLine", id: newCountry, idx: 3})
+    }
     this.setState({
       selected2: newCountry
     })
   }
 
   updateValue3(newCountry) {
+    if (newCountry) {
+      this.props.dispatch({type: "addRemoveLine", id: newCountry.value + '1', idx: 4})
+    } else {
+      this.props.dispatch({type: "addRemoveLine", id: newCountry, idx: 4})
+    }
     this.setState({
       selected3: newCountry
     })
@@ -123,7 +141,9 @@ export class CountrySelect extends Component {
 
 const mapStateToProps = (state) => {
   return {
-    data : state.entities.data,
+    data: state.entities.data.filter(data => {
+      return state.graphs[1].dataToshow.indexOf(data.id) !== -1
+    }),
     graphOptions: state.entities.layouts,
     countries: state.entities.countries,
     defaultCountry: state.defaultCountry

src/index.js

@@ -11,32 +11,54 @@ let xValues = ['2017-01-01','2017-01-08','2017-01-15'];
 let reduxStore = {
   graphs: {
     1: {
-      title: 'DDOS-graph',
-      dataToshow: ['t1','t2'],
+      title: 'dns-graph',
+      dataToshow: ['uk1','t1'],
       graphLayout: ['l1']
     }
   },
   entities: {
     data: [
       {
+        id: 'uk1',
         x: xValues,
         y: [2,4,6],
-        name: 'example N1',
+        name: 'United Kingdom',
         type: 'scatter'
       },
       {
+        id: 't1',
         x: xValues,
         y: [1,4,7],
-        name: 'example N2',
+        name: 'Global',
+        type: 'scatter'
+      },
+      {
+        id: 'us1',
+        x: xValues,
+        y: [6,3,2],
+        name: 'United States',
+        type: 'scatter'
+      },
+      {
+        id: 'ge1',
+        x: xValues,
+        y: [5,12,1],
+        name: 'Georgia',
+        type: 'scatter'
+      },
+      {
+        id: 'kz1',
+        x: xValues,
+        y: [0,12,10],
+        name: 'Kazakstan',
         type: 'scatter'
       }
     ],
     layouts: {
       l1: {
-        title : 'Global DDOS potential',
+        title : 'Open DNS',
         height: 600,
         xaxis: {
-          title: '*This chart assumes an average 1 mbit/sec Internet connection for every IP address.',
           gridcolor: 'transparent',
         },
         yaxis: {
@@ -49,12 +71,31 @@ let reduxStore = {
       {value: 'uk', label: 'United Kingdom' },
       {value: 'us', label: 'United States' },
       {value: 'ge', label: 'Georgia' },
+      {value: 'kz', label: 'Kazakhstan' }
     ]
   },
   defaultCountry: {value: 'uk', label: 'United Kingdom' }
 }
 const reducer = function(state, action) {
+  // makes new copy of list, for not to mutate previous state
+  let newDataToShow = state.graphs[1].dataToshow
+  newDataToShow[action.idx] = action.id
+
   switch(action.type) {
+    case 'addRemoveLine':
+      return {...state,
+        graphs: {
+          1: {
+            title: 'dns-graph',
+            dataToshow: Object.assign(
+              [],
+              state.graphs[1].dataToshow,
+              newDataToShow
+            ),
+            graphLayout: ['l1']
+          }
+        }
+      }
     default:
       return state
   }