Added age filter with range 1-20, 20-30, 30-40, 40-50, 50-60, 60-70 and 70 up

components/FilterPanel/index.js

@@ -4,14 +4,16 @@ import styled from 'styled-components'
 import { connect } from 'react-redux'
 import _ from 'lodash'
 
-import { state, city, abroad, p2p } from '../../images/index'
+import { state, city, abroad, p2p, age } from '../../images/index'
 import {
   addStates,
   removeStates,
   addCities,
   removeCities,
   addTravel,
   removeTravel,
+  addAge,
+  removeAge
 } from '../../util/filters'
 import { updateGraph, selectFilter } from '../Redux/actions'
 
@@ -29,6 +31,7 @@ const filters = [
   { name: 'State', icon: state, add: addStates, remove: removeStates },
   { name: 'City', icon: city, add: addCities, remove: removeCities },
   { name: 'Travel', icon: abroad, add: addTravel, remove: removeTravel },
+  { name: 'Age', icon: age, add: addAge, remove: removeAge },
 ]
 
 const HeaderContainer = styled.div`
@@ -50,7 +53,7 @@ const HeaderContainer = styled.div`
 
 const FilterMenuContainer = styled.div`
   display: grid;
-  grid-template-rows: 10% 10% 10% 10% 60%;
+  grid-template-rows: 10% 10% 10% 10% 10% 60%;
   overflow: auto;
   font-family: 'Lato', sans-serif;
   color: #7c7a7a;

components/NetworkMapLegend/index.js

@@ -8,6 +8,13 @@ import {
     city_node,
     plane_abroad_node,
     plane_local_node,
+    oneTo20,
+    twentyTo30,
+    thirtyTo40,
+    fortyTo50,
+    fiftyTo60,
+    sixtyTo70,
+    seventyUp
 } from '../../images/index'
 
 
@@ -104,6 +111,35 @@ const NetworkMapLegend = ({ currentFilter }) => {
                 </>
                 : null
             }
+            {currentFilter === 'Age' ?
+                <>
+                    <ImageContainer>
+                        <Image src={oneTo20} />
+                        <Label>01 - 20 Age</Label>
+                    </ImageContainer>
+                    <ImageContainer>
+                        <Image src={twentyTo30} />
+                        <Label>20 - 30 Age</Label>
+                    </ImageContainer>
+                    <ImageContainer>
+                        <Image src={thirtyTo40} />
+                        <Label>30 - 40 Age</Label>
+                    </ImageContainer>
+                    <ImageContainer>
+                        <Image src={fiftyTo60} />
+                        <Label>40 - 50 Age</Label>
+                    </ImageContainer>
+                    <ImageContainer>
+                        <Image src={sixtyTo70} />
+                        <Label>60 - 70 Age</Label>
+                    </ImageContainer>
+                    <ImageContainer>
+                        <Image src={seventyUp} />
+                        <Label>70 up Age</Label>
+                    </ImageContainer>
+                </>
+                : null
+            }
         </LegendContainer>
     )
 }

images/index.js

@@ -9,12 +9,21 @@ import abroad from './filter/abroad.png'
 import state from './filter/state.png'
 import city from './filter/city.png'
 import p2p from './filter/p2p.png'
+import age from './filter/age.png'
 
 import state_node from './nodes/state.png'
 import city_node from './nodes/city.png'
 import plane_abroad_node from './nodes/plane.png'
 import plane_local_node from './nodes/plane_local.png'
 
+import oneTo20 from './nodes/1-20.png'
+import twentyTo30 from './nodes/20-30.png'
+import thirtyTo40 from './nodes/30-40.png'
+import fortyTo50 from './nodes/40-50.png'
+import fiftyTo60 from './nodes/50-60.png'
+import sixtyTo70 from './nodes/60-70.png'
+import seventyUp from './nodes/70up.png'
+
 export {
   male_cured,
   male_dead,
@@ -26,8 +35,16 @@ export {
   city,
   state_node,
   p2p,
+  age,
   city_node,
   abroad,
   plane_abroad_node,
   plane_local_node,
+  oneTo20,
+  twentyTo30,
+  thirtyTo40,
+  fortyTo50,
+  fiftyTo60,
+  sixtyTo70,
+  seventyUp
 }

util/filters/age.js

@@ -0,0 +1,124 @@
+import hash from 'object-hash'
+import _ from 'lodash'
+import dotProp from 'dot-prop-immutable'
+
+import { oneTo20, twentyTo30, thirtyTo40, fortyTo50, fiftyTo60, sixtyTo70, seventyUp } from '../../images'
+
+export const addAge = (graph, patients) => {
+    let ages = {}
+
+    for (let patientId in patients) {
+        if (patients[patientId].ageEstimate !== null) {
+            let age = patients[patientId].ageEstimate
+            age = ageFiltration(age)
+
+            ages[hash(age)] = age
+        }
+    }
+
+    for (let age in ages) {
+        let node = {
+            id: age,
+            label: ages[age],
+            size: 30,
+            shape: 'image',
+            image: ageFiltrationIcons(ages[age])
+        }
+        graph = dotProp.set(graph, 'nodes', list => [...list, node])
+    }
+
+    // Add edges from patient to ages
+    for (let patientId in patients) {
+        if (
+            patients[patientId].ageEstimate !== null &&
+            patients[patientId].ageEstimate[0]
+        ) {
+            let age = patients[patientId].ageEstimate
+            age = ageFiltration(age)
+
+            let edge = {
+                from: hash(age),
+                to: patients[patientId].patientId,
+                length: 700,
+                dashes: true,
+                arrows: {
+                    to: {
+                        enabled: false,
+                    },
+                },
+                color: { opacity: '0.2' },
+            }
+
+            graph = dotProp.set(graph, 'edges', list => [...list, edge])
+        }
+    }
+
+    return graph
+}
+
+export const removeAge = (graph, patients) => {
+    let ages = {}
+
+    for (let patientId in patients) {
+        if (patients[patientId].ageEstimate !== null) {
+            let age = patients[patientId].ageEstimate
+            age = ageFiltration(age)
+
+            ages[hash(age)] = age
+        }
+    }
+
+    for (let age in ages) {
+        let node = {
+            id: age,
+            label: ages[age],
+            size: 30,
+            shape: 'image',
+            image: ageFiltrationIcons(ages[age])
+        }
+        let index = _.findIndex(dotProp.get(graph, 'nodes'), function (o) {
+            return o.id == node.id
+        })
+        if (index !== -1) {
+            graph = dotProp.delete(graph, `nodes.${index}`)
+        }
+    }
+
+    for (let patientId in patients) {
+        if (
+            patients[patientId].ageEstimate !== null &&
+            patients[patientId].ageEstimate[0]
+        ) {
+            let age = patients[patientId].ageEstimate
+            age = ageFiltration(age)
+
+            let edge = {
+                from: hash(age),
+                to: patients[patientId].patientId,
+                length: 500,
+                dashes: true,
+                arrows: {
+                    to: {
+                        enabled: false,
+                    },
+                },
+                color: { opacity: '0.2' },
+            }
+
+            let edgeIndex = _.findIndex(graph.edges, function (o) {
+                return o.to == edge.to && o.from === edge.from
+            })
+
+            graph = dotProp.delete(graph, `edges.${edgeIndex}`)
+        }
+    }
+    return graph
+}
+
+const ageFiltration = (age) => {
+    return age >= 70 ? "70 up" : age >= 60 ? "60 - 70" : age >= 50 ? "50 - 60" : age >= 40 ? "40 - 50" : age >= 30 ? "30 - 40" : age >= 20 ? "20 - 30" : "1 - 20"
+}
+
+const ageFiltrationIcons = (age) => {
+    return age === "70 up" ? seventyUp : age === "60 - 70" ? sixtyTo70 : age === "50 - 60" ? fiftyTo60 : age === "40 - 50" ? fortyTo50 : age === "30 - 40" ? thirtyTo40 : age === "20 - 30" ? twentyTo30 : oneTo20
+}

util/filters/index.js

@@ -1,6 +1,7 @@
 import { addStates, removeStates } from './state'
 import { addCities, removeCities } from './city'
 import { addTravel, removeTravel } from './travel'
+import { addAge, removeAge } from './age'
 
 export {
   addStates,
@@ -9,4 +10,6 @@ export {
   removeCities,
   addTravel,
   removeTravel,
+  addAge, 
+  removeAge
 }