add score bar

+import React from 'react';
+import { Text } from 'react-native-paper';
+import { StyleSheet,View } from 'react-native';
+
+export default PromptSearchRate = () => (
+    <View style={{alignItems:'center'}}>
+        <Text  style={styles.Text}>아직 검색</Text>
+        <Text  style={styles.Text}>결과가 없습니다!</Text>
+    </View>
+)
+
+
+const styles = StyleSheet.create({
+    Text:{
+        fontSize: 25,
+    },
+
+});
\ No newline at end of file

 import React from 'react';
 import { View, Text} from 'react-native';
+import {connect} from 'react-redux'
 import Icon from 'react-native-vector-icons/FontAwesome';
 import RateSentence from '../RateSentence/RateSentence';
 import RateBar from '../RateBar/RateBar';
 import RateLine from '../RateLine/RateLine';
+import scoring from '../../lib/scoring';
 
-const Rate = () => {
+const Rate = ({score}) => {
     return(
         <View style={{flex: 1, backgroundColor:'#eee', margin:0,padding:0, justifyContent:'center',alignItems:'center'}}>
             <RateSentence />
-            <RateBar />
+            <RateBar score={score}/>
             <RateLine />
         </View>
     )
 }
 
-Rate.navigationOptions={
+const RateContainer = ({score}) => {
+    return(<Rate score={score} />)
+}
+
+RateContainer.navigationOptions={
     title:'평가',
    tabBarIcon: ({tintColor})=> (<Icon name="bar-chart-o" color={tintColor}   style={{marginLeft:0.5}} size={20} />),
 }
 
-export default Rate;
\ No newline at end of file
+export default connect(
+    ({search})=>({
+        score: scoring(search.result.return_data)
+    })
+)(RateContainer);
\ No newline at end of file

-import React from 'react';
-import { Surface, Text } from 'react-native-paper';
-import { StyleSheet } from 'react-native';
+import React,{ useState } from 'react';
+import { Surface, Text ,HelperText} from 'react-native-paper';
+import { StyleSheet,View } from 'react-native';
 import { StackedBarChart  } from 'react-native-svg-charts';
+import PromptSearchRate from '../PromptSearch/PromptSearchRate';
 
+export default RateBar = (props) => {
+    const [ click,setClick ] = useState(0);
 
-export default RateBar = (props) => (
+    return (
         <Surface style={styles.surface}>
+            
+            {props.score.msg.length ?
+            <>
+            <View style={styles.container}>
+                <Text style={styles.Text}>점수</Text>
+                <View style={styles.colorContainer}>
+                    <View style={styles.textContainer}>
+                        <View style={styles.colorA}></View><Text>키워드 점수</Text>
+                    </View>
+                    <View style={styles.textContainer}>
+                        <View style={styles.colorB}></View><Text>맞춤법 점수</Text>
+                    </View>
+                </View>
+            </View>
             <StackedBarChart  
-        data={ [{keyword:20,korean:20}]} 
-        style={{height:50, width:'100%'}}
-        keys={['keyword','korean']} 
-        colors={['#a5aa5a','#2cc3c2']}
+            data={ [{
+                keyword: {
+                    value: props.score.key,
+                    svg: {
+                        onPressIn: () => {setClick(1)},
+                        onPressOut: ()=>{setClick(0)}
+                    },
+                },
+                korean: {
+                    value: props.score.fix,
+                    svg: {
+                        onPressIn: () => {setClick(2)},
+                        onPressOut: ()=>{setClick(0)}
+                    },
+                }, 
+                rest: {
+                    value: (100-(props.score.key+props.score.fix)),
+                }
+            }]} 
+            style={{height:60, width:'90%'}}
+            keys={['keyword','korean','rest']} 
+            colors={['#ffaa5a','#2cc3c2','#ffffff']}
             showGrid={ false }
             horizontal={ true }
-        contentInset={ { top: 30, bottom: 30 } } 
-        yMax={100}
+            contentInset={ { top: 10, bottom: 10 } }  
+            valueAccessor={({ item, key }) => item[key].value}
             /> 
+            <View style={styles.infoContainer}>
+                <HelperText type={'info'} visible={click==1} style={{fontSize:20}}>키워드 : {props.score.key}</HelperText>
+                <HelperText type={'info'} visible={click==2} style={{fontSize:20}}>맞춤법 : {props.score.fix}</HelperText>
+            </View>
+            </>
+            : <PromptSearchRate />}
         </Surface>
+        
      );
+}
+
+
 
 const styles = StyleSheet.create({
+    container:{
+        width: '100%',
+        flexDirection:'row',
+        justifyContent:'center',
+    },
+    colorContainer:{
+        position:"absolute",
+        right:0,
+    },
+    colorA:{
+        backgroundColor:'#ffaa5a',
+        height: 7,
+        width: 7,
+        marginRight: 5,
+    },
+    colorB:{
+        backgroundColor:'#2cc3c2',
+        height: 7,
+        width: 7,
+        marginRight: 5,
+    },
+    textContainer:{
+        flexDirection:'row',
+        justifyContent:'center',
+        alignItems:'center'
+    },
+    infoContainer:{
+        flexDirection:'row',
+        justifyContent:'space-around',
+        alignItems:'center',
+        width: '100%'
+    },
     surface: {
         padding: 8,
         flex: 0.3,
@@ -29,4 +106,7 @@ const styles = StyleSheet.create({
         elevation: 2,
         marginTop: 10
     },
+    Text:{
+        fontSize: 25,
+    },
 });

@@ -2,6 +2,7 @@ import React,{ useState } from 'react';
 import { Surface, Text } from 'react-native-paper';
 import { StyleSheet,View } from 'react-native';
 import {connect} from 'react-redux';
+import PromptSearchRate from '../PromptSearch/PromptSearchRate';
 
 const SentenceInfo = (props) => (
     <View>
@@ -26,10 +27,7 @@ const RateSentence = ({originalText, fixedText, keywordText }) => {
                     {count == 1 && ( <SentenceInfo Text={fixedText} info={'맞춤법 교정 문장'} color={'#2196F3'} />) }
                     {count == 2 && ( <SentenceInfo Text={keywordText} info={'키워드 교정 문장'} color={'#00a676'} />) }
                 </View> 
-                : <View style={{alignItems:'center'}}>
-                    <Text  style={styles.Text}>아직 검색</Text>
-                    <Text  style={styles.Text}>결과가 없습니다!</Text>
-                </View>
+                : <PromptSearchRate />
             }
             
         </Surface>

 import test from '../assets/test.json'
+import filter from './filter';
 
 export const readTest = () => {
     let testResult = test;
-    return testResult;
+    return filter(testResult);
 }
\ No newline at end of file

+const assistance = [ 
+    ["완벽해요!","키워드가 완벽해요!","맞춤법을 신경써주세요.","세종대왕님이 울고 계십니다."],
+    ["맞춤법이 완벽해요!","훌륭하지만 맞춤법과 키워드 둘 다 완벽하지는 않네요.","맞춤법이 부족하지만 키워드를 잘 찾으시네요.","세종대왕님이 울고 계십니다."],
+    ["키워드를 신경써주세요.","키워드가 부족하지만 맞춤법을 잘 맞추시네요.","키워드와 맞춤법 둘 다 부족하시네요.","둘 다 부족하지만 키워드가 조금 더 낫네요."],
+    ["키워드 점수가 많이 부족하십니다.","키워드 점수가 많이 부족하십니다.","둘 다 부족하지만 맞춤법이 조금 더 낫네요.","개선이 많이 필요해 보입니다."]
+]
+
+const getComment = ( fixScore, keywordScore ) => {
+    let fixPos, morpPos;
+    if( fixScore == 30 ) {
+        fixPos = 0;
+    } else if( fixScore >= 25 && fixScore < 30 ) {
+        fixPos = 1;
+    } else if( fixScore >= 15 && fixScore < 25 ) {
+        fixPos = 2;
+    } else {
+        fixPos = 3;
+    }
+
+    if( keywordScore == 70 ) {
+        morpPos = 0;
+    } else if( keywordScore >= 55 && keywordScore < 69 ) {
+        morpPos = 1;
+    } else if( keywordScore >= 30 && keywordScore < 54 ){
+        morpPos = 2;
+    } else {
+        morpPos = 3;
+    }
+    return assistance[morpPos][fixPos];
+}
+
+export default scoring = ( return_data ) => {
+    if(return_data.originalText){
+        let Text = return_data.originalText,
+        lenNeed = return_data.morps.needMorp.length,
+        lenNoNeed = return_data.morps.noNeedMorp.length,
+        fixedText;
+    try {
+        fixedText = /span class=\'result_underline\'>(.*?)<\/span>/g.exec(return_data.korean.origin_html)[1]; 
+    }
+    catch ( err ) {
+        fixedText = "";
+    }
+
+    let fixScore = Math.round( ( ( Text.length - fixedText.length ) / Text.length ) * 30 ), 
+        keywordScore = Math.round( lenNeed / ( lenNoNeed + lenNeed ) * 70 ),
+        fullScore = fixScore + keywordScore;
+
+    let comment = getComment(fixScore,keywordScore);
+
+    return { "fix" : fixScore, "key" : keywordScore, "full" : fullScore, "msg" : comment};
+    }
+    else {
+        return { "fix" : 0, "key" : 0, "full" : 0, "msg" : ''} ;
+    }
+}
+    
\ No newline at end of file