city changing

PulseTile · Jul 4, 2019 · 43df121 · 43df121
1 parent a4c782d
commit 43df121
Show file tree

Hide file tree

Showing 11 changed files with 145 additions and 62 deletions.
diff --git a/src/version/actions/BusinessIntelligence/businessIntelligenceAction.js b/src/version/actions/BusinessIntelligence/businessIntelligenceAction.js
@@ -1,7 +1,8 @@
 import { createRequestTypes } from "../../../core/actions/functions";
 
-export const BUSINESS_INTELLIGENCE_ACTION = createRequestTypes('BUSINESS_INTELLIGENCE_ACTION', { UPDATE: 'UPDATE' });
+export const BUSINESS_INTELLIGENCE_ACTION = createRequestTypes('BUSINESS_INTELLIGENCE_ACTION', { UPDATE: 'UPDATE', REMOVE: 'REMOVE' });
 
 export const businessIntelligenceAction = {
-    update: data => ({type: BUSINESS_INTELLIGENCE_ACTION.UPDATE, data}),
+    update: data => ({ type: BUSINESS_INTELLIGENCE_ACTION.UPDATE, data }),
+    remove: data => ({ type: BUSINESS_INTELLIGENCE_ACTION.REMOVE, data }),
 };
diff --git a/src/version/config/theme.config.js b/src/version/config/theme.config.js
@@ -9,6 +9,7 @@ import RespectSummaryPanel from "../pages/ReSPECT/fragments/summaryPanel";
 export const themeShortMenu = [
     { url: '/', label: 'Charts' },
     { url: '/patients', label: 'Patients' },
+    { url: '/business', label: 'Business Intelligence'},
 ];
 
 export const themeFullMenu = [

diff --git a/src/version/pages/BusinessIntelligence/charts/AverageHealthScore.js b/src/version/pages/BusinessIntelligence/charts/AverageHealthScore.js
@@ -33,12 +33,10 @@ const styles = theme => ({
     }
 });
 
-const HARDCORE_VALUE = 68;
-
-const AverageHealthScore = ({ classes }) => {
+const AverageHealthScore = ({ classes, color, healthScore }) => {
     const data = [
-        { name: 'Group A', value: HARDCORE_VALUE },
-        { name: 'Group B', value: 100 - HARDCORE_VALUE }
+        { name: 'Group A', value: healthScore },
+        { name: 'Group B', value: 100 - healthScore }
     ];
     return (
         <React.Fragment>
@@ -55,12 +53,12 @@ const AverageHealthScore = ({ classes }) => {
                             paddingAngle={5}
                             dataKey="value"
                         >
-                            <Cell fill={COLOR_AMBER} />
+                            <Cell fill={color} />
                             <Cell fill={COLOR_EMPTY} />
                         </Pie>
                     </PieChart>
                 </ResponsiveContainer>
-                <Typography variant="h1" className={classes.value}>{HARDCORE_VALUE} %</Typography>
+                <Typography variant="h1" className={classes.value}>{healthScore} %</Typography>
                 <Typography variant="body1">Moderate</Typography>
                 <div className={classes.bordersLabels}>
                     <Typography variant="caption">Unhealthy</Typography>

diff --git a/src/version/pages/BusinessIntelligence/charts/Population.js b/src/version/pages/BusinessIntelligence/charts/Population.js
@@ -69,7 +69,7 @@ const CustomTooltip = ({ classes, active, payload }) => {
 class Population extends Component {
 
     render() {
-        const { classes } = this.props;
+        const { classes, color, population } = this.props;
 
         const data = [
             { name: '2008', uv: 3 },
@@ -90,7 +90,7 @@ class Population extends Component {
         return (
             <div className={classes.mainBlock}>
                 <Typography variant="body1" className={classes.chartTitle}>Population</Typography>
-                <Typography variant="body1" className={classes.populationNumber}>5,230,230</Typography>
+                <Typography variant="body1" className={classes.populationNumber}>{population}</Typography>
                 <div className={classes.chartBlock}>
                     <ResponsiveContainer height={200}>
                         <AreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
@@ -101,7 +101,7 @@ class Population extends Component {
                                 content={<CustomTooltip classes={classes} />}
                                 cursor={false}
                             />
-                            <Area type="linear" dataKey="uv" stroke={COLOR_RED} fill={COLOR_RED} />
+                            <Area type="linear" dataKey="uv" stroke={color} fill={color} />
                         </AreaChart>
                     </ResponsiveContainer>
                 </div>

diff --git a/src/version/pages/BusinessIntelligence/dummyCityStatistic.js b/src/version/pages/BusinessIntelligence/dummyCityStatistic.js
@@ -0,0 +1,31 @@
+import { COLOR_AMBER, COLOR_GREEN, COLOR_RED } from "./constants";
+
+export const dummyCities = [
+    { id: 'leeds', cityName: "Leeds", lat: 53.79648, lng: -1.54785, size: 70, healthScore: 82, color: COLOR_GREEN, population: '781,700' },
+    { id: 'darlington', cityName: "Darlington", lat: 54.52429, lng: -1.55039, size: 40, healthScore: 86, color: COLOR_GREEN, population: '105,564' },
+    { id: 'doncaster', cityName: "Doncaster", lat: 53.52285, lng: -1.13116, size: 40, healthScore: 86, color: COLOR_GREEN, population: '109,805' },
+    { id: 'scarborough', cityName: "Scarborough", lat: 54.27966, lng: -0.40443, size: 40, healthScore: 62, color: COLOR_AMBER, population: '108,600' },
+    { id: 'bridlington', cityName: "Bridlington", lat: 54.08306, lng: -0.19192, size: 30, healthScore: 24, color: COLOR_RED, population: '35,369' },
+    { id: 'rotherham', cityName: "Rotherham", lat: 53.43012, lng: -1.35678, size: 40, healthScore: 61, color: COLOR_AMBER, population: '109,691' },
+    { id: 'halifax', cityName: "Halifax", lat: 53.71667, lng: -1.85, size: 30, healthScore: 72, color: COLOR_GREEN, population: '88,134' },
+    { id: 'bradford', cityName: "Bradford", lat: 53.79391, lng: -1.75206, size: 60, healthScore: 85, color: COLOR_GREEN, population: '537,173' },
+    { id: 'harrogate', cityName: "Harrogate", lat: 53.99078, lng: -1.5373, size: 30, healthScore: 23, color: COLOR_RED, population: '75,070' },
+    { id: 'huddersfield', cityName: "Huddersfield", lat: 53.64904, lng: -1.78416, size: 40, healthScore: 79, color: COLOR_GREEN, population: '162,949' },
+    { id: 'hull', cityName: "Hull", lat: 53.7446, lng: -0.33525, size: 45, healthScore: 68, color: COLOR_AMBER, population: '260,645' },
+    { id: 'york', cityName: "York", lat: 53.955413, lng: -1.08271, size: 60, healthScore: 60, color: COLOR_AMBER, population: '209,893' },
+    { id: 'middlesbrough', cityName: "Middlesbrough", lat: 54.57623, lng: -1.23483, size: 40, healthScore: 22, color: COLOR_RED, population: '174,700' },
+    { id: 'sheffield', cityName: "Sheffield", lat: 53.38297, lng: -1.4659, size: 70, healthScore: 20, color: COLOR_RED, population: '582,506' },
+    { id: 'pickering', cityName: "Pickering", lat: 54.25, lng: -0.76667, size: 20, healthScore: 20, color: COLOR_RED, population: '6,830' },
+];
+
+export function getCityById(id) {
+    let result = null;
+    for (let i = 0, n = dummyCities.length; i < n; i++) {
+        let item = dummyCities[i];
+        if (item.id === id) {
+            result = item;
+            break;
+        }
+    }
+    return result;
+}
diff --git a/src/version/pages/BusinessIntelligence/fragments/BusinessIntelligenceForm.js b/src/version/pages/BusinessIntelligence/fragments/BusinessIntelligenceForm.js
@@ -10,7 +10,7 @@ import Checkbox from "@material-ui/core/Checkbox";
 import Typography from "@material-ui/core/Typography";
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faFilter } from '@fortawesome/free-solid-svg-icons';
+import { faFilter, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 
 import { businessIntelligenceAction } from "../../../actions/BusinessIntelligence/businessIntelligenceAction";
 import { genderArray, diagnosisArray } from "../constants";
@@ -84,6 +84,22 @@ const styles = theme => ({
             color: theme.palette.paperColor,
         },
     },
+    resetButton: {
+        display: "block",
+        width: 140,
+        height: 40,
+        margin: "8px !important",
+        color: theme.palette.dangerColor,
+        backgroundColor: theme.palette.paperColor,
+        border: `1px solid ${theme.palette.dangerColor}`,
+        borderRadius: theme.isRectangleButtons ? 0 : 25,
+        fontSize: 16,
+        fontWeight: 800,
+        "&:hover": {
+            backgroundColor: theme.palette.dangerColor,
+            color: theme.palette.paperColor,
+        },
+    },
     filterIcon: {
         marginLeft: 5,
     }
@@ -99,6 +115,10 @@ class BusinessIntelligenceForm extends Component {
     };
 
     componentDidMount() {
+        this.setInitialValues();
+    }
+
+    setInitialValues = () => {
         let genders = [];
         let diagnosis = [];
         for (let i = 0, n = genderArray.length; i < n; i++) {
@@ -113,7 +133,18 @@ class BusinessIntelligenceForm extends Component {
             gender: genders,
             diagnosis: diagnosis,
         })
-    }
+    };
+
+    resetForm = () => {
+        const { resetBusinessIntelligence } = this.props;
+        this.setState(state => ({
+            age: [0, 100],
+            healthScore: [0, 100],
+        }), () => {
+            this.setInitialValues();
+            resetBusinessIntelligence();
+        });
+    };
 
     isGenderChecked = item => {
         const { gender } = this.state;
@@ -247,6 +278,10 @@ class BusinessIntelligenceForm extends Component {
                     </Grid>
                 </Grid>
                 <div className={classes.toolbar}>
+                    <Button type="button" aria-label="Update" className={classes.resetButton} onClick={() => this.resetForm()}>
+                        Reset
+                        <FontAwesomeIcon icon={faTimesCircle} className={classes.filterIcon} size="1x" />
+                    </Button>
                     <Button type="submit" aria-label="Update" className={classes.updateButton} onClick={() => this.updateBusinessIntelligence()}>
                         Update
                         <FontAwesomeIcon icon={faFilter} className={classes.filterIcon} size="1x" />
@@ -268,6 +303,9 @@ const mapDispatchToProps = dispatch => {
         updateBusinessIntelligence(data) {
             dispatch(businessIntelligenceAction.update(data));
         },
+        resetBusinessIntelligence() {
+            dispatch(businessIntelligenceAction.remove());
+        }
     }
 };
 

diff --git a/src/version/pages/BusinessIntelligence/index.js b/src/version/pages/BusinessIntelligence/index.js
@@ -18,6 +18,7 @@ import PieCharts from "./tabs/PieCharts";
 import BusinessIntelligenceForm from "./fragments/BusinessIntelligenceForm";
 import ChartsSelector from "./fragments/ChartsSelector";
 import { HEAT_MAP, BAR_CHARTS, PIE_CHARTS } from "./constants";
+import { getCityById } from "./dummyCityStatistic";
 
 const styles = theme => ({
     mainBlock: {
@@ -98,13 +99,20 @@ class BusinessIntelligence extends Component {
     state = {
         isFromPanelOpen: true,
         isChartsPanelOpen: true,
-        currentTab: HEAT_MAP
+        currentTab: HEAT_MAP,
+        currentCity: getCityById('york'),
     };
 
     componentDidMount() {
         this.props.setSidebarVisibility(false);
     }
 
+    changeCity = id => {
+        this.setState({
+            currentCity: getCityById(id),
+        });
+    };
+
     togglePanel = panel => {
         this.setState({
             [panel]: !this.state[panel],
@@ -164,7 +172,7 @@ class BusinessIntelligence extends Component {
 
     render() {
         const { classes, history, businessIntelligence } = this.props;
-        const { isFromPanelOpen, isChartsPanelOpen, currentTab } = this.state;
+        const { isFromPanelOpen, isChartsPanelOpen, currentTab, currentCity } = this.state;
         const CurrentTabContent = this.getCurrentTabContent();
         return (
             <Grid item xs={12} className={classes.mainBlock}>
@@ -190,6 +198,8 @@ class BusinessIntelligence extends Component {
                                 <Grid className={classes.currentTabContainer} container>
                                     <CurrentTabContent
                                         classes={classes}
+                                        currentCity={currentCity}
+                                        changeCity={this.changeCity}
                                         businessIntelligence={businessIntelligence}
                                         isAgeRangeVisible={this.isAgeRangeVisible}
                                         isDiagnosisVisible={this.isDiagnosisVisible}

diff --git a/src/version/pages/BusinessIntelligence/map/CircleOnMap.js b/src/version/pages/BusinessIntelligence/map/CircleOnMap.js
@@ -7,6 +7,7 @@ import PopoverInfo from "./PopoverInfo";
 const styles = theme => ({
     circle: {
         opacity: 0.5,
+        cursor: 'pointer',
     },
 });
 
@@ -29,13 +30,14 @@ class CircleOnMap extends Component {
     };
 
     render() {
-        const { classes, size, color, cityName, healthScore } = this.props;
+        const { classes, id, size, color, cityName, healthScore, onClick } = this.props;
         const { anchorEl } = this.state;
         const open = Boolean(anchorEl);
         return (
             <React.Fragment>
                 <div
                     className={classes.circle}
+                    onClick={() => onClick(id)}
                     onMouseOver={e => this.handleClick(e)}
                     onMouseOut={() => this.handleClose()}
                     style={{

diff --git a/src/version/pages/BusinessIntelligence/map/index.js b/src/version/pages/BusinessIntelligence/map/index.js
@@ -5,28 +5,10 @@ import GoogleMapReact from 'google-map-react';
 
 import CircleOnMap from "./CircleOnMap";
 import MapLegend from "./MapLegend";
-import { COLOR_GREEN, COLOR_RED, COLOR_AMBER } from "../constants";
 
-const API_KEY = 'AIzaSyCskY6-WDa0tfSayzD2gzu-EAKIfJUoUGA';
-
-const dummyData = [
-    { cityName: "Leeds", lat: 53.79648, lng: -1.54785, size: 70, healthScore: 82, color: COLOR_GREEN },
-    { cityName: "Darlington", lat: 54.52429, lng: -1.55039, size: 40, healthScore: 86, color: COLOR_GREEN },
-    { cityName: "Doncaster", lat: 53.52285, lng: -1.13116, size: 35, healthScore: 86, color: COLOR_GREEN },
-    { cityName: "Scarborough", lat: 54.27966, lng: -0.40443, size: 30, healthScore: 62, color: COLOR_AMBER },
-    { cityName: "Bridlington", lat: 54.08306, lng: -0.19192, size: 20, healthScore: 24, color: COLOR_RED },
-    { cityName: "Rotherham", lat: 53.43012, lng: -1.35678, size: 30, healthScore: 61, color: COLOR_AMBER },
-    { cityName: "Halifax", lat: 53.71667, lng: -1.85, size: 30, healthScore: 72, color: COLOR_GREEN },
-    { cityName: "Bradford", lat: 53.79391, lng: -1.75206, size: 30, healthScore: 85, color: COLOR_GREEN },
-    { cityName: "Harrogate", lat: 53.99078, lng: -1.5373, size: 45, healthScore: 23, color: COLOR_RED },
-    { cityName: "Huddersfield", lat: 53.64904, lng: -1.78416, size: 20, healthScore: 79, color: COLOR_GREEN },
-    { cityName: "Hull", lat: 53.7446, lng: -0.33525, size: 45, healthScore: 68, color: COLOR_AMBER },
-    { cityName: "York", lat: 53.955413, lng: -1.08271, size: 60, healthScore: 68, color: COLOR_AMBER },
-    { cityName: "Middlesbrough", lat: 54.57623, lng: -1.23483, size: 40, healthScore: 22, color: COLOR_RED },
-    { cityName: "Sheffield", lat: 53.38297, lng: -1.4659, size: 30, healthScore: 20, color: COLOR_RED },
-    { cityName: "Pickering", lat: 54.25, lng: -0.76667, size: 20, healthScore: 20, color: COLOR_RED },
+import { dummyCities } from "../dummyCityStatistic";
 
-];
+const API_KEY = 'AIzaSyCskY6-WDa0tfSayzD2gzu-EAKIfJUoUGA';
 
 class MapWithStatistics extends Component {
 
@@ -77,6 +59,7 @@ class MapWithStatistics extends Component {
     };
 
     render() {
+        const { changeCity } = this.props;
         const { isPoorSelected, isGoodSelected, isVeryGoodSelected } = this.state;
         return (
             <div style={{ height: '80vh', width: '100%' }}>
@@ -85,17 +68,19 @@ class MapWithStatistics extends Component {
                     defaultCenter={this.props.center}
                     defaultZoom={this.props.zoom}
                 >
-                    { dummyData.filter(item => this.filterByHealthScore(item.healthScore)).map((item, key) => {
+                    { dummyCities.filter(item => this.filterByHealthScore(item.healthScore)).map((item, key) => {
                         if (this.isItemVisible(item)) {
                             return (
                                 <CircleOnMap
                                     key={key}
+                                    id={item.id}
                                     lat={item.lat}
                                     lng={item.lng}
                                     size={item.size}
                                     color={item.color}
                                     cityName={item.cityName}
                                     healthScore={item.healthScore}
+                                    onClick={changeCity}
                                 />
                             )
                         }

diff --git a/src/version/pages/BusinessIntelligence/tabs/HeatMap.js b/src/version/pages/BusinessIntelligence/tabs/HeatMap.js
@@ -1,4 +1,5 @@
-import React from "react";
+import React, { Component } from "react";
+import get from "lodash/get";
 
 import { withStyles } from "@material-ui/core/styles/index";
 import Grid from "@material-ui/core/Grid";
@@ -17,29 +18,39 @@ const styles = theme => ({
     }
 });
 
-const HeatMap = ({ classes, businessIntelligence, isDiagnosisVisible, isAgeRangeVisible }) => {
-    return (
-        <React.Fragment>
-            <Grid className={classes.chart} item xs={12} sm={12} md={6}>
-                <div className={classes.tableBlock}>
-                    <Typography variant="h1">Yorkshire, UK</Typography>
-                </div>
-                <div className={classes.chartsContainer}>
-                    <MapWithStatistics businessIntelligence={businessIntelligence} />
-                </div>
-            </Grid>
-            <Grid className={classes.chart} item xs={12} sm={8} md={5}>
-                <div className={classes.tableBlock}>
-                    <Typography variant="h1">Statistics</Typography>
-                </div>
-                <div className={classes.chartsContainer}>
-                    <AverageHealthScore />
-                    <Population />
-                    <DiagnosisByAge isDiagnosisVisible={isDiagnosisVisible} isAgeRangeVisible={isAgeRangeVisible} />
-                </div>
-            </Grid>
-        </React.Fragment>
-    );
+class HeatMap extends Component {
+
+    render() {
+        const { classes, businessIntelligence, isDiagnosisVisible, isAgeRangeVisible, currentCity, changeCity } = this.props;
+        return (
+            <React.Fragment>
+                <Grid className={classes.chart} item xs={12} sm={12} md={6}>
+                    <div className={classes.tableBlock}>
+                        <Typography variant="h1">Yorkshire, UK</Typography>
+                    </div>
+                    <div className={classes.chartsContainer}>
+                        <MapWithStatistics businessIntelligence={businessIntelligence} changeCity={changeCity} currentCityId={currentCity.id} />
+                    </div>
+                </Grid>
+                <Grid className={classes.chart} item xs={12} sm={8} md={5}>
+                    <div className={classes.tableBlock}>
+                        <Typography variant="h1">Statistics: {get(currentCity, 'cityName', null)}</Typography>
+                    </div>
+                    <div className={classes.chartsContainer}>
+                        <AverageHealthScore
+                            color={get(currentCity, 'color', null)}
+                            healthScore={get(currentCity, 'healthScore', null)}
+                        />
+                        <Population
+                            color={get(currentCity, 'color', null)}
+                            population={get(currentCity, 'population', null)}
+                        />
+                        <DiagnosisByAge isDiagnosisVisible={isDiagnosisVisible} isAgeRangeVisible={isAgeRangeVisible} />
+                    </div>
+                </Grid>
+            </React.Fragment>
+        );
+    }
 };
 
 export default withStyles(styles)(HeatMap);