bluejoyq / searchGuide

Go to a project
Toggle navigation Toggle navigation pinning
bluejoyq
288169d3 1 parent 1b1853e2

add score bar

Inline Side-by-side
Showing 6 changed files with 183 additions and 19 deletions
1 +import React from 'react';
2 +import { Text } from 'react-native-paper';
3 +import { StyleSheet,View } from 'react-native';
4 +
5 +export default PromptSearchRate = () => (
6 + <View style={{alignItems:'center'}}>
7 + <Text style={styles.Text}>아직 검색</Text>
8 + <Text style={styles.Text}>결과가 없습니다!</Text>
9 + </View>
10 +)
11 +
12 +
13 +const styles = StyleSheet.create({
14 + Text:{
15 + fontSize: 25,
16 + },
17 +
18 +});
...\ No newline at end of file ...\ No newline at end of file
1 import React from 'react'; 1 import React from 'react';
2 import { View, Text} from 'react-native'; 2 import { View, Text} from 'react-native';
3 +import {connect} from 'react-redux'
3 import Icon from 'react-native-vector-icons/FontAwesome'; 4 import Icon from 'react-native-vector-icons/FontAwesome';
4 import RateSentence from '../RateSentence/RateSentence'; 5 import RateSentence from '../RateSentence/RateSentence';
5 import RateBar from '../RateBar/RateBar'; 6 import RateBar from '../RateBar/RateBar';
6 import RateLine from '../RateLine/RateLine'; 7 import RateLine from '../RateLine/RateLine';
8 +import scoring from '../../lib/scoring';
7 9
8 -const Rate = () => { 10 +const Rate = ({score}) => {
9 return( 11 return(
10 <View style={{flex: 1, backgroundColor:'#eee', margin:0,padding:0, justifyContent:'center',alignItems:'center'}}> 12 <View style={{flex: 1, backgroundColor:'#eee', margin:0,padding:0, justifyContent:'center',alignItems:'center'}}>
11 <RateSentence /> 13 <RateSentence />
12 - <RateBar /> 14 + <RateBar score={score}/>
13 <RateLine /> 15 <RateLine />
14 </View> 16 </View>
15 ) 17 )
16 } 18 }
17 19
18 -Rate.navigationOptions={ 20 +const RateContainer = ({score}) => {
21 + return(<Rate score={score} />)
22 +}
23 +
24 +RateContainer.navigationOptions={
19 title:'평가', 25 title:'평가',
20 tabBarIcon: ({tintColor})=> (<Icon name="bar-chart-o" color={tintColor} style={{marginLeft:0.5}} size={20} />), 26 tabBarIcon: ({tintColor})=> (<Icon name="bar-chart-o" color={tintColor} style={{marginLeft:0.5}} size={20} />),
21 } 27 }
22 28
23 -export default Rate;
...\ No newline at end of file ...\ No newline at end of file
29 +export default connect(
30 + ({search})=>({
31 + score: scoring(search.result.return_data)
32 + })
33 +)(RateContainer);
...\ No newline at end of file ...\ No newline at end of file
......
1 -import React from 'react'; 1 +import React,{ useState } from 'react';
2 -import { Surface, Text } from 'react-native-paper'; 2 +import { Surface, Text ,HelperText} from 'react-native-paper';
3 -import { StyleSheet } from 'react-native'; 3 +import { StyleSheet,View } from 'react-native';
4 import { StackedBarChart } from 'react-native-svg-charts'; 4 import { StackedBarChart } from 'react-native-svg-charts';
5 +import PromptSearchRate from '../PromptSearch/PromptSearchRate';
5 6
7 +export default RateBar = (props) => {
8 + const [ click,setClick ] = useState(0);
6 9
7 -export default RateBar = (props) => ( 10 + return (
8 <Surface style={styles.surface}> 11 <Surface style={styles.surface}>
12 +
13 + {props.score.msg.length ?
14 + <>
15 + <View style={styles.container}>
16 + <Text style={styles.Text}>점수</Text>
17 + <View style={styles.colorContainer}>
18 + <View style={styles.textContainer}>
19 + <View style={styles.colorA}></View><Text>키워드 점수</Text>
20 + </View>
21 + <View style={styles.textContainer}>
22 + <View style={styles.colorB}></View><Text>맞춤법 점수</Text>
23 + </View>
24 + </View>
25 + </View>
9 <StackedBarChart 26 <StackedBarChart
10 - data={ [{keyword:20,korean:20}]} 27 + data={ [{
11 - style={{height:50, width:'100%'}} 28 + keyword: {
12 - keys={['keyword','korean']} 29 + value: props.score.key,
13 - colors={['#a5aa5a','#2cc3c2']} 30 + svg: {
31 + onPressIn: () => {setClick(1)},
32 + onPressOut: ()=>{setClick(0)}
33 + },
34 + },
35 + korean: {
36 + value: props.score.fix,
37 + svg: {
38 + onPressIn: () => {setClick(2)},
39 + onPressOut: ()=>{setClick(0)}
40 + },
41 + },
42 + rest: {
43 + value: (100-(props.score.key+props.score.fix)),
44 + }
45 + }]}
46 + style={{height:60, width:'90%'}}
47 + keys={['keyword','korean','rest']}
48 + colors={['#ffaa5a','#2cc3c2','#ffffff']}
14 showGrid={ false } 49 showGrid={ false }
15 horizontal={ true } 50 horizontal={ true }
16 - contentInset={ { top: 30, bottom: 30 } } 51 + contentInset={ { top: 10, bottom: 10 } }
17 - yMax={100} 52 + valueAccessor={({ item, key }) => item[key].value}
18 /> 53 />
54 + <View style={styles.infoContainer}>
55 + <HelperText type={'info'} visible={click==1} style={{fontSize:20}}>키워드 : {props.score.key}</HelperText>
56 + <HelperText type={'info'} visible={click==2} style={{fontSize:20}}>맞춤법 : {props.score.fix}</HelperText>
57 + </View>
58 + </>
59 + : <PromptSearchRate />}
19 </Surface> 60 </Surface>
61 +
20 ); 62 );
63 +}
64 +
65 +
21 66
22 const styles = StyleSheet.create({ 67 const styles = StyleSheet.create({
68 + container:{
69 + width: '100%',
70 + flexDirection:'row',
71 + justifyContent:'center',
72 + },
73 + colorContainer:{
74 + position:"absolute",
75 + right:0,
76 + },
77 + colorA:{
78 + backgroundColor:'#ffaa5a',
79 + height: 7,
80 + width: 7,
81 + marginRight: 5,
82 + },
83 + colorB:{
84 + backgroundColor:'#2cc3c2',
85 + height: 7,
86 + width: 7,
87 + marginRight: 5,
88 + },
89 + textContainer:{
90 + flexDirection:'row',
91 + justifyContent:'center',
92 + alignItems:'center'
93 + },
94 + infoContainer:{
95 + flexDirection:'row',
96 + justifyContent:'space-around',
97 + alignItems:'center',
98 + width: '100%'
99 + },
23 surface: { 100 surface: {
24 padding: 8, 101 padding: 8,
25 flex: 0.3, 102 flex: 0.3,
...@@ -29,4 +106,7 @@ const styles = StyleSheet.create({ ...@@ -29,4 +106,7 @@ const styles = StyleSheet.create({
29 elevation: 2, 106 elevation: 2,
30 marginTop: 10 107 marginTop: 10
31 }, 108 },
109 + Text:{
110 + fontSize: 25,
111 + },
32 }); 112 });
......
...@@ -2,6 +2,7 @@ import React,{ useState } from 'react'; ...@@ -2,6 +2,7 @@ import React,{ useState } from 'react';
2 import { Surface, Text } from 'react-native-paper'; 2 import { Surface, Text } from 'react-native-paper';
3 import { StyleSheet,View } from 'react-native'; 3 import { StyleSheet,View } from 'react-native';
4 import {connect} from 'react-redux'; 4 import {connect} from 'react-redux';
5 +import PromptSearchRate from '../PromptSearch/PromptSearchRate';
5 6
6 const SentenceInfo = (props) => ( 7 const SentenceInfo = (props) => (
7 <View> 8 <View>
...@@ -26,10 +27,7 @@ const RateSentence = ({originalText, fixedText, keywordText }) => { ...@@ -26,10 +27,7 @@ const RateSentence = ({originalText, fixedText, keywordText }) => {
26 {count == 1 && ( <SentenceInfo Text={fixedText} info={'맞춤법 교정 문장'} color={'#2196F3'} />) } 27 {count == 1 && ( <SentenceInfo Text={fixedText} info={'맞춤법 교정 문장'} color={'#2196F3'} />) }
27 {count == 2 && ( <SentenceInfo Text={keywordText} info={'키워드 교정 문장'} color={'#00a676'} />) } 28 {count == 2 && ( <SentenceInfo Text={keywordText} info={'키워드 교정 문장'} color={'#00a676'} />) }
28 </View> 29 </View>
29 - : <View style={{alignItems:'center'}}> 30 + : <PromptSearchRate />
30 - <Text style={styles.Text}>아직 검색</Text>
31 - <Text style={styles.Text}>결과가 없습니다!</Text>
32 - </View>
33 } 31 }
34 32
35 </Surface> 33 </Surface>
......
1 import test from '../assets/test.json' 1 import test from '../assets/test.json'
2 +import filter from './filter';
2 3
3 export const readTest = () => { 4 export const readTest = () => {
4 let testResult = test; 5 let testResult = test;
5 - return testResult; 6 + return filter(testResult);
6 } 7 }
...\ No newline at end of file ...\ No newline at end of file
......
1 +const assistance = [
2 + ["완벽해요!","키워드가 완벽해요!","맞춤법을 신경써주세요.","세종대왕님이 울고 계십니다."],
3 + ["맞춤법이 완벽해요!","훌륭하지만 맞춤법과 키워드 둘 다 완벽하지는 않네요.","맞춤법이 부족하지만 키워드를 잘 찾으시네요.","세종대왕님이 울고 계십니다."],
4 + ["키워드를 신경써주세요.","키워드가 부족하지만 맞춤법을 잘 맞추시네요.","키워드와 맞춤법 둘 다 부족하시네요.","둘 다 부족하지만 키워드가 조금 더 낫네요."],
5 + ["키워드 점수가 많이 부족하십니다.","키워드 점수가 많이 부족하십니다.","둘 다 부족하지만 맞춤법이 조금 더 낫네요.","개선이 많이 필요해 보입니다."]
6 +]
7 +
8 +const getComment = ( fixScore, keywordScore ) => {
9 + let fixPos, morpPos;
10 + if( fixScore == 30 ) {
11 + fixPos = 0;
12 + } else if( fixScore >= 25 && fixScore < 30 ) {
13 + fixPos = 1;
14 + } else if( fixScore >= 15 && fixScore < 25 ) {
15 + fixPos = 2;
16 + } else {
17 + fixPos = 3;
18 + }
19 +
20 + if( keywordScore == 70 ) {
21 + morpPos = 0;
22 + } else if( keywordScore >= 55 && keywordScore < 69 ) {
23 + morpPos = 1;
24 + } else if( keywordScore >= 30 && keywordScore < 54 ){
25 + morpPos = 2;
26 + } else {
27 + morpPos = 3;
28 + }
29 + return assistance[morpPos][fixPos];
30 +}
31 +
32 +export default scoring = ( return_data ) => {
33 + if(return_data.originalText){
34 + let Text = return_data.originalText,
35 + lenNeed = return_data.morps.needMorp.length,
36 + lenNoNeed = return_data.morps.noNeedMorp.length,
37 + fixedText;
38 + try {
39 + fixedText = /span class=\'result_underline\'>(.*?)<\/span>/g.exec(return_data.korean.origin_html)[1];
40 + }
41 + catch ( err ) {
42 + fixedText = "";
43 + }
44 +
45 + let fixScore = Math.round( ( ( Text.length - fixedText.length ) / Text.length ) * 30 ),
46 + keywordScore = Math.round( lenNeed / ( lenNoNeed + lenNeed ) * 70 ),
47 + fullScore = fixScore + keywordScore;
48 +
49 + let comment = getComment(fixScore,keywordScore);
50 +
51 + return { "fix" : fixScore, "key" : keywordScore, "full" : fullScore, "msg" : comment};
52 + }
53 + else {
54 + return { "fix" : 0, "key" : 0, "full" : 0, "msg" : ''} ;
55 + }
56 +}
57 +
...\ No newline at end of file ...\ No newline at end of file