김서영 / searchGuide

Go to a project
Toggle navigation Toggle navigation pinning
김서영
e2d40125 1 parent 8016738c

pie chart

Inline Side-by-side
Showing 5 changed files with 77 additions and 56 deletions
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
2 "devToolsPort": 19002, 2 "devToolsPort": 19002,
3 "expoServerPort": 19000, 3 "expoServerPort": 19000,
4 "packagerPort": 19001, 4 "packagerPort": 19001,
5 - "packagerPid": 14768, 5 + "packagerPid": 14076,
6 - "expoServerNgrokUrl": "https://x2-7pb.anonymous.searchguide.exp.direct", 6 + "expoServerNgrokUrl": "https://7f-yzp.anonymous.searchguide.exp.direct",
7 - "packagerNgrokUrl": "https://packager.x2-7pb.anonymous.searchguide.exp.direct", 7 + "packagerNgrokUrl": "https://packager.7f-yzp.anonymous.searchguide.exp.direct",
8 - "ngrokPid": 9336 8 + "ngrokPid": 2900
9 } 9 }
......
...@@ -3,6 +3,6 @@ ...@@ -3,6 +3,6 @@
3 "lanType": "ip", 3 "lanType": "ip",
4 "dev": true, 4 "dev": true,
5 "minify": false, 5 "minify": false,
6 - "urlRandomness": "x2-7pb", 6 + "urlRandomness": "7f-yzp",
7 "https": false 7 "https": false
8 } 8 }
......
...@@ -3,7 +3,7 @@ import { Text } from 'react-native-paper'; ...@@ -3,7 +3,7 @@ import { Text } from 'react-native-paper';
3 import { StyleSheet,View } from 'react-native'; 3 import { StyleSheet,View } from 'react-native';
4 4
5 export default PromptSearchRate = () => ( 5 export default PromptSearchRate = () => (
6 - <View style={{alignItems:'center'}}> 6 + <View style={{alignItems: 'center',justifyContent: 'center'}}>
7 <Text style={styles.Text}>아직까지 검색</Text> 7 <Text style={styles.Text}>아직까지 검색</Text>
8 <Text style={styles.Text}>결과가 없습니다!</Text> 8 <Text style={styles.Text}>결과가 없습니다!</Text>
9 </View> 9 </View>
......
1 import React,{ useState } from 'react'; 1 import React,{ useState } from 'react';
2 import { Surface, Text ,HelperText} from 'react-native-paper'; 2 import { Surface, Text ,HelperText} from 'react-native-paper';
3 import { StyleSheet,View } from 'react-native'; 3 import { StyleSheet,View } from 'react-native';
4 -import { StackedBarChart } from 'react-native-svg-charts'; 4 +import { StackedBarChart, PieChart } from 'react-native-svg-charts';
5 import PromptSearchRate from '../PromptSearch/PromptSearchRate'; 5 import PromptSearchRate from '../PromptSearch/PromptSearchRate';
6 6
7 export default RateBar = (props) => { 7 export default RateBar = (props) => {
...@@ -14,48 +14,53 @@ export default RateBar = (props) => { ...@@ -14,48 +14,53 @@ export default RateBar = (props) => {
14 <> 14 <>
15 <View style={styles.container}> 15 <View style={styles.container}>
16 <Text style={styles.Text}>총 점수 : {props.score.full}점</Text> 16 <Text style={styles.Text}>총 점수 : {props.score.full}점</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> 17 </View>
26 - <StackedBarChart 18 + <View style={styles.container}>
27 - data={ [{ 19 + <Text style={styles.message}>눌러서 각각의 점수를 알아보세요!</Text>
28 - keyword: { 20 + </View>
29 - value: props.score.key,
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:50, width:'90%'}}
47 - keys={['keyword','korean','rest']}
48 - colors={['#ffaa5a','#2cc3c2','#ffffff']}
49 - showGrid={ false }
50 - horizontal={ true }
51 - contentInset={ { top: 10 } }
52 - valueAccessor={({ item, key }) => item[key].value}
53 - />
54 <View style={styles.infoContainer}> 21 <View style={styles.infoContainer}>
55 - <HelperText type={'info'} visible={click==1} style={styles.helper}>키워드 : {props.score.key}</HelperText>
56 <HelperText type={'info'} visible={click==2} style={styles.helper}>맞춤법 : {props.score.fix}</HelperText> 22 <HelperText type={'info'} visible={click==2} style={styles.helper}>맞춤법 : {props.score.fix}</HelperText>
23 + <HelperText type={'info'} visible={click==1} style={styles.helper}>키워드 : {props.score.key}</HelperText>
24 + </View>
25 + <View style={styles.chartContatiner}>
26 + <View>
27 + <PieChart
28 + style={ styles.chart }
29 + data={[{
30 + value: props.score.key,
31 + svg:{
32 + fill : '#e85a71',
33 + onPressIn: () => {setClick(1)},
34 + onPressOut: ()=>{setClick(0)}
35 + },
36 + key: "키워드"
37 + },
38 + {
39 + value: props.score.fix,
40 + svg: {
41 + fill : '#d8e9ef',
42 + onPressIn: () => {setClick(2)},
43 + onPressOut: ()=>{setClick(0)}
44 + },
45 + key: "맞춤법"
46 + },
47 + {
48 + value: (100-(props.score.key+props.score.fix)),
49 + key : ""
50 + }
51 + ]}
52 + innerRadius={"60%"}
53 + />
54 + </View>
55 + <View style={styles.colorContainer}>
56 + <View style={styles.textContainer}>
57 + <View style={styles.colorA}></View><Text>키워드 점수</Text>
58 + </View>
59 + <View style={styles.textContainer}>
60 + <View style={styles.colorB}></View><Text>맞춤법 점수</Text>
61 + </View>
62 + </View>
57 </View> 63 </View>
58 - <Text style={styles.message}>눌러서 각각의 점수를 알아보세요!</Text>
59 </> 64 </>
60 : <PromptSearchRate />} 65 : <PromptSearchRate />}
61 </Surface> 66 </Surface>
...@@ -73,10 +78,10 @@ const styles = StyleSheet.create({ ...@@ -73,10 +78,10 @@ const styles = StyleSheet.create({
73 }, 78 },
74 colorContainer:{ 79 colorContainer:{
75 position:"absolute", 80 position:"absolute",
76 - right:0, 81 + right:10,
77 }, 82 },
78 colorA:{ 83 colorA:{
79 - backgroundColor:'#ffaa5a', 84 + backgroundColor:'#e85a71',
80 height: 7, 85 height: 7,
81 width: 7, 86 width: 7,
82 marginRight: 5, 87 marginRight: 5,
...@@ -84,13 +89,23 @@ const styles = StyleSheet.create({ ...@@ -84,13 +89,23 @@ const styles = StyleSheet.create({
84 fontSize: 13, 89 fontSize: 13,
85 }, 90 },
86 colorB:{ 91 colorB:{
87 - backgroundColor:'#2cc3c2', 92 + backgroundColor:'#d8e9ef',
88 height: 7, 93 height: 7,
89 width: 7, 94 width: 7,
90 marginRight: 5, 95 marginRight: 5,
91 fontFamily:"Regular", 96 fontFamily:"Regular",
92 fontSize: 13, 97 fontSize: 13,
93 }, 98 },
99 + chartContatiner:{
100 + flexDirection:'row',
101 + justifyContent:"flex-start",
102 + alignItems:'flex-start',
103 + },
104 + chart:{
105 + height: 120,
106 + width:"90%",
107 + position:"absolute",
108 + },
94 textContainer:{ 109 textContainer:{
95 flexDirection:'row', 110 flexDirection:'row',
96 justifyContent:'center', 111 justifyContent:'center',
...@@ -104,11 +119,13 @@ const styles = StyleSheet.create({ ...@@ -104,11 +119,13 @@ const styles = StyleSheet.create({
104 width: '100%' 119 width: '100%'
105 }, 120 },
106 surface: { 121 surface: {
107 - padding: 8, 122 + paddingTop: 8,
108 - flex: 0.3, 123 + paddingBottom:5,
124 + flex: 0.45,
109 width: '95%', 125 width: '95%',
110 - alignItems: 'center', 126 + flexDirection:'column',
111 - justifyContent: 'center', 127 + alignItems: "center",
128 + justifyContent: 'flex-start',
112 elevation: 2, 129 elevation: 2,
113 marginTop: 10, 130 marginTop: 10,
114 borderRadius: 5, 131 borderRadius: 5,
...@@ -121,9 +138,10 @@ const styles = StyleSheet.create({ ...@@ -121,9 +138,10 @@ const styles = StyleSheet.create({
121 message:{ 138 message:{
122 fontFamily:"Son", 139 fontFamily:"Son",
123 fontSize: 20, 140 fontSize: 20,
141 + marginBottom: 10,
124 }, 142 },
125 helper:{ 143 helper:{
126 - fontFamily:"Regular", 144 + fontFamily:"Bold",
127 fontSize:15 145 fontSize:15
128 } 146 }
129 }); 147 });
......
...@@ -39,7 +39,8 @@ const RateLine = ({load,pastRecords }) => { ...@@ -39,7 +39,8 @@ const RateLine = ({load,pastRecords }) => {
39 39
40 const styles = StyleSheet.create({ 40 const styles = StyleSheet.create({
41 surface: { 41 surface: {
42 - padding: 8, 42 + paddingTop: 5,
43 + paddingBottom:5,
43 flex: 0.3, 44 flex: 0.3,
44 width: '95%', 45 width: '95%',
45 alignItems: 'center', 46 alignItems: 'center',
...@@ -51,7 +52,7 @@ const styles = StyleSheet.create({ ...@@ -51,7 +52,7 @@ const styles = StyleSheet.create({
51 }, 52 },
52 info:{ 53 info:{
53 fontSize:22, 54 fontSize:22,
54 - marginBottom: 5, 55 + marginBottom: 10,
55 fontFamily:"Bold", 56 fontFamily:"Bold",
56 }, 57 },
57 score:{ 58 score:{
...@@ -61,7 +62,8 @@ const styles = StyleSheet.create({ ...@@ -61,7 +62,8 @@ const styles = StyleSheet.create({
61 scoreContainer:{ 62 scoreContainer:{
62 flexDirection:'row', 63 flexDirection:'row',
63 justifyContent: 'space-around', 64 justifyContent: 'space-around',
64 - width:'100%' 65 + width:'100%',
66 + backgroundColor :'#ececf8',
65 }, 67 },
66 data:{ 68 data:{
67 fontSize:10, 69 fontSize:10,
...@@ -69,6 +71,7 @@ const styles = StyleSheet.create({ ...@@ -69,6 +71,7 @@ const styles = StyleSheet.create({
69 fontFamily:"Regular", 71 fontFamily:"Regular",
70 }, 72 },
71 past:{ 73 past:{
74 + backgroundColor :'#ececf8',
72 alignItems:'center', 75 alignItems:'center',
73 marginBottom:5 76 marginBottom:5
74 }, 77 },
......