Merge pull request #1117 from agnetedjupvik/header-panel

Project Presence panel
IFRCGo · Jun 7, 2019 · 57a50d6 · 57a50d6
2 parents 7b0118e + ac3a899
commit 57a50d6
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 64 deletions.
diff --git a/Source/Analytics/Web.Frontend/src/components/Analytics.js b/Source/Analytics/Web.Frontend/src/components/Analytics.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
-import AnalyticsBanner from "./AnalyticsBanner.js";
 import Map from "./Map.js";
 import Diagram from "./Diagram.js";
+import ProjectPresence from "./ProjectPresence.js";
 
 export const BASE_URL = process.env.API_BASE_URL;
 
@@ -12,8 +12,8 @@ class Analytics extends Component {
     render() {
         return (
             <div className="analytics--container">
-                <AnalyticsBanner />
-                <Map />
+                <ProjectPresence />
+
                 <Diagram
                     selectedSeries={["Total"]}
                     hasDatePicker

diff --git a/Source/Analytics/Web.Frontend/src/components/Map.js b/Source/Analytics/Web.Frontend/src/components/Map.js
@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { Map, Popup, CircleMarker, TileLayer } from "react-leaflet";
 import { formatDate, toOrDefault, fromOrDefault } from "../utils/dateUtils";
 import { getJson } from "../utils/request";
-import { Alert, Button } from "evergreen-ui";
+import { Alert, Button, Text } from "evergreen-ui";
 
 import { BASE_URL } from "./Analytics";
 
@@ -90,13 +90,14 @@ class MapWidget extends Component {
             );
         }
         return (
-            <Map center={position} zoom={6}>
+            <Map center={position} zoom={5} style={{height: 210, width: 210}}>
                 <TileLayer
                     attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                     url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
                 />
                 <OutbreakMarkers outbreaks={this.state.outbreaks} />
             </Map>
+
         );
     }
 }

diff --git a/Source/Analytics/Web.Frontend/src/components/PresenceIndicator.js b/Source/Analytics/Web.Frontend/src/components/PresenceIndicator.js
@@ -0,0 +1,34 @@
+import React from "react";
+import { Heading, UnorderedList, ListItem } from "evergreen-ui";
+
+export class PresenceIndicator extends React.Component {
+    createInfoLine(presenceData) {
+        let text = "";
+        Object.values(presenceData).forEach(value => {text = value + " " + text}); //prepend to the text as we want the numbers before the description
+        return text;
+    }
+
+    render() {
+        return (
+            <div className="analytics--headerPanel" style={{marginRight: 30}}>
+                <i className={`${this.props.icon} fa fa-5x analytics--headerPanelIcon`} />
+
+                <Heading color={this.props.color} size={600} paddingTop={"20px"}>
+                    {this.props.headline}
+                </Heading>
+
+                <div className="analytics--listContainer">
+                    <UnorderedList size={500}>
+                        {this.props.list.map(
+                            (data, index) => (
+                                <ListItem key={index}>
+                                    {this.createInfoLine(data)}
+                                </ListItem>
+                            )
+                        )}
+                    </UnorderedList>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/...rontend/src/components/AnalyticsBanner.js → ...rontend/src/components/ProjectPresence.js b/...rontend/src/components/AnalyticsBanner.js → ...rontend/src/components/ProjectPresence.js
@@ -3,20 +3,20 @@ import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 import {
     Heading,
-    UnorderedList,
-    ListItem,
     Button,
     Spinner,
     Alert,
     Text
 } from "evergreen-ui";
 import { DatePicker } from "./DatePicker";
+import { PresenceIndicator } from "./PresenceIndicator";
+import Map from "./Map.js";
 import { updateRange } from "../actions/analysisactions";
 import { formatDate, fromOrDefault, toOrDefault } from "../utils/dateUtils";
 import { BASE_URL } from "./Analytics";
 import { getJson } from "../utils/request";
 
-class AnalyticsBanner extends Component {
+class ProjectPresence extends Component {
     constructor(props) {
         super(props);
 
@@ -154,65 +154,37 @@ class AnalyticsBanner extends Component {
             );
         }
 
+        let headerPanelContainerStyle = {
+            display: 'flex',
+            flexWrap: 'wrap',
+            marginTop: 10,
+            marginBottom: 10
+        };
+
         return (
             <>
                 {header}
-                <div className="analytics--headerPanelContainer">
-                    <div className="analytics--headerPanel">
-                        <i className=" fa fa-heartbeat fa-5x analytics--headerPanelIcon" />
-
-                        <Heading color="#9f0000" size={600} paddingTop={"20px"}>
-                            {this.state.caseReports.totalNumberOfReports}{" "}
-                            Reports
-                        </Heading>
-                        <div className="analytics--listContainer">
-                            <UnorderedList size={500}>
-                                {this.state.caseReports.reportedHealthRisks.map(
-                                    (data, index) => (
-                                        <ListItem key={index}>
-                                            {data.numberOfReports} {data.name}
-                                        </ListItem>
-                                    )
-                                )}
-                            </UnorderedList>
-                        </div>
-                    </div>
-                    <div className="analytics--headerPanel">
-                        <i className="analytics--headerPanelIcon fa fa-user fa-5x" />
-
-                        <Heading color="#009f00" size={600} paddingTop={"20px"}>
-                            {`${
-                                this.state.dataCollectors.activeDataCollectors
-                            } Active Data Collectors`}
-                        </Heading>
-                        <div className="analytics--listContainer">
-                            <UnorderedList size={500}>
-                                <ListItem>{`${
-                                    this.state.dataCollectors
-                                        .inactiveDataCollectors
-                                } Inactive`}</ListItem>
-                            </UnorderedList>
-                        </div>
-                    </div>
-                    <div className="analytics--headerPanel">
-                        <i className="analytics--headerPanelIcon fa fa-exclamation-triangle fa-5x " />
-
-                        <Heading color="#9f0000" size={600} paddingTop={"20px"}>
-                            {`${this.state.alerts.totalNumberOfAlerts} Alerts`}
-                        </Heading>
-                        <div className="analytics--listContainer">
-                            <UnorderedList size={500}>
-                                {this.state.alerts.alertsPerHealthRisk.map(
-                                    (data, index) => (
-                                        <ListItem key={index}>
-                                            {data.numberOfReports}{" "}
-                                            {data.healthRisk}
-                                        </ListItem>
-                                    )
-                                )}
-                            </UnorderedList>
-                        </div>
+                <Heading size={800} marginTop={20}>Project Presence</Heading>
+
+                <div className="analytics--headerPanelContainer" style={headerPanelContainerStyle}>
+                    <PresenceIndicator 
+                        headline={`${this.state.caseReports.totalNumberOfReports} Reports`}
+                        list={this.state.caseReports.reportedHealthRisks}
+                        color="#9f0000"
+                        icon="fa-heartbeat"
+                    />
+
+                    <PresenceIndicator 
+                        headline={`${this.state.dataCollectors.activeDataCollectors} Active Data Collectors`}
+                        list={[{name:"Inactive Data Collectors", inactiveDataCollectors: this.state.dataCollectors.inactiveDataCollectors}]}
+                        color="#009f00"
+                        icon="fa-user"
+                    />
+
+                    <div>
+                        <Map />
                     </div>
+
                 </div>
             </>
         );
@@ -232,4 +204,4 @@ function mapDispatchToProps(dispatch) {
 export default connect(
     mapStateToProps,
     mapDispatchToProps
-)(AnalyticsBanner);
+)(ProjectPresence);