Upate monitoring UI

tsmatch_client/src/scene/Home.js

@@ -161,7 +161,6 @@
      render() {
          return (
              <View style={styles.container}>
-                 {this.settingsModal()}
                  {this.howtoModal()}
                  <View style={styles.topView}>
                      <TouchableOpacity style={styles.howtoIcon} onPress={() => {

tsmatch_client/src/scene/Updates.js

@@ -5,14 +5,14 @@
  * This file contains UI and business logic of "Updates" page, which includes graphs of observations
  */
 
-import React from 'react';
-import {View, Text, ScrollView, SafeAreaView} from 'react-native';
+import React, { useState } from 'react';
+import {View, Text, ScrollView, SafeAreaView, Button, TouchableOpacity} from 'react-native';
 import {connect} from 'react-redux';
 import BottomNavigation from "../component/BottomNavigation";
 import EStyleSheet from 'react-native-extended-stylesheet';
 import {LineChart, Grid, YAxis} from 'react-native-svg-charts'
 import store from "../config/store";
-import _ from "underscore";
+import _, { zip } from "underscore";
 import AspectService from "../service/AspectService";
 import ObservationService from "../service/ObservationService";
 import * as Colors from '../constant/string/Colors';
@@ -26,7 +26,19 @@ class Updates extends React.Component {
         this.state = {
             observationList: [],
             selectedAspectList: [],
-            isMounted: false
+            isMounted: false,
+            graphVisible:false,
+            statistics: [
+                {
+                    graphId: "",
+                    min: 10,
+                    
+                }
+            ]
+           
+        };
+        visibility={
+            visible:true
         };
     }
 
@@ -80,30 +92,38 @@ class Updates extends React.Component {
                 orderedObservations.map(observation => (
                     observationValues.push(observation.results)
                 ));
-
+                //const m = observationValues => Math.max(...observationValues);
+                var max = Math.max(...observationValues);
+                //const mi = observationValues => Math.min(...observationValues);
+                var min = Math.min(...observationValues);
+                var lastone=observationValues[observationValues.length - 1];
                 // create an object for the observation list that can be visualized
                 let request = AspectService.findRequestById(observationList[0].responseId, this.props.requestList);
                 if (request) {
                     let graphTitle = request.featureOfInterest + " - " + ObservationService.getLocationTextFromObservation(observationList[0]);
                     newObservationList.push({
                         "title": graphTitle,
-                        "values": observationValues
+                        "values": observationValues,
+                        "min": min,
+                        "max": max,
+                        "currently":lastone
+                        
                     });
                 }
-                //const m = observationValues => Math.max(...observationValues);
-                var m = Math.max(...observationValues);
-                //const mi = observationValues => Math.min(...observationValues);
-                var mi = Math.min(...observationValues);
-
-           
+                           
             });
         });
         this.setState({observationList: newObservationList});
+        
     }
 
     render() {
         const contentInset = {top: 20, bottom: 20}
         let graphIndex = 0;
+        
+        const texthidden = this.state.graphVisible ? "Hide Details" : "Show Details";
+       
+
 
         // create a graph for each of the entry in observationList, which is grouped by location and responseId
         let renderList = this.state.observationList.map(observations => (
@@ -113,6 +133,32 @@ class Updates extends React.Component {
                     {observations.title}
                 </Text>
                 
+                <View key={observations.objectId} >
+                <View style={styles.statistic} numberOfLines={1}>
+                    <Text style={styles.statisticText}>
+                        Current: {observations.currently}
+                    </Text>
+                    <Text style={styles.statisticText}>
+                        Maximun: {observations.max}
+
+                    </Text>
+                    <Text style={styles.statisticText}>
+                    Minimun: {observations.min}
+
+                    </Text>
+                    </View>
+                    <View style={styles.buttoncontainer}>
+                    <TouchableOpacity 
+                onPress={() => {
+                            this.setState({graphVisible:!this.state.graphVisible});
+                        }}>
+                    <Text style={styles.hideshowButton}>{texthidden}</Text>
+                    
+                       
+                        
+                </TouchableOpacity>
+                </View>
+                {this.state.graphVisible ? 
                 <View key={observations.objectId} style={styles.graph}>
                     <YAxis
                         data={observations.values}
@@ -132,7 +178,10 @@ class Updates extends React.Component {
                     >
                         <Grid/>
                     </LineChart>
+                    </View>: null}
                 </View>
+            
+                
             </View>
         ));
 
@@ -148,11 +197,15 @@ class Updates extends React.Component {
                             {this.props.messages.getUpdatesDefinition}
                         </Text>
                     </View>
-                    {renderList}
+                   
+                    <View>
+                        {renderList}
+                        
+                    </View>
                 </ScrollView>
                 <View style={{flex: 1}}/>
                 <BottomNavigation navigation={this.props.navigation}/>
-            </SafeAreaView>
+            </SafeAreaView> 
         );
     }
 }
@@ -188,7 +241,7 @@ let styles = EStyleSheet.create({
     },
     graphTitle: {
         textAlign: 'center',
-        marginTop: '10rem',
+        marginTop: '20rem',
         fontSize: '15rem',
         fontWeight: 'bold',
         color: Colors.blue,
@@ -201,10 +254,44 @@ let styles = EStyleSheet.create({
         height: "200rem",
         width: "80%",
         padding: "10rem",
-        marginVertical: "5%",
+        marginVertical: "1%",
         backgroundColor: Colors.light_blue,
         
     },
+    statistic: {
+        flexWrap: "wrap",
+        marginHorizontal: "10%",
+        flexDirection: "row",
+        justifyContent:"center",
+        width: "80%",
+        padding: "10rem",
+        marginTop: "3%",
+        backgroundColor: Colors.light_blue
+
+        
+        
+    },
+    statisticText:{
+        fontSize:"15rem",
+        color: Colors.blue,
+        marginVertical:"2%",
+        marginHorizontal: "3%",
+    },
+    buttoncontainer:{
+        marginHorizontal: "10%",
+        width: "80%",
+        backgroundColor: Colors.light_blue,
+        flexDirection:"row",
+        justifyContent:"flex-end"
+
+
+    },
+    hideshowButton:{
+
+        margin:"5%",
+        fontSize:"10rem",
+        color:Colors.blue
+    },
     lineChart: {
         flex: 1,
         marginLeft: "15rem"