bluejoyq / 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 63 additions and 42 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> 17 </View>
18 + <View style={styles.container}>
19 + <Text style={styles.message}>눌러서 각각의 점수를 알아보세요!</Text>
24 </View> 20 </View>
21 + <View style={styles.infoContainer}>
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>
25 </View> 24 </View>
26 - <StackedBarChart 25 + <View style={styles.chartContatiner}>
27 - data={ [{ 26 + <View>
28 - keyword: { 27 + <PieChart
28 + style={ styles.chart }
29 + data={[{
29 value: props.score.key, 30 value: props.score.key,
30 - svg: { 31 + svg:{
32 + fill : '#e85a71',
31 onPressIn: () => {setClick(1)}, 33 onPressIn: () => {setClick(1)},
32 onPressOut: ()=>{setClick(0)} 34 onPressOut: ()=>{setClick(0)}
33 }, 35 },
36 + key: "키워드"
34 }, 37 },
35 - korean: { 38 + {
36 value: props.score.fix, 39 value: props.score.fix,
37 svg: { 40 svg: {
41 + fill : '#d8e9ef',
38 onPressIn: () => {setClick(2)}, 42 onPressIn: () => {setClick(2)},
39 onPressOut: ()=>{setClick(0)} 43 onPressOut: ()=>{setClick(0)}
40 }, 44 },
45 + key: "맞춤법"
41 }, 46 },
42 - rest: { 47 + {
43 value: (100-(props.score.key+props.score.fix)), 48 value: (100-(props.score.key+props.score.fix)),
49 + key : ""
44 } 50 }
45 - }]} 51 + ]}
46 - style={{height:50, width:'90%'}} 52 + innerRadius={"60%"}
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 /> 53 />
54 - <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>
57 </View> 54 </View>
58 - <Text style={styles.message}>눌러서 각각의 점수를 알아보세요!</Text> 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>
63 + </View>
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 },
......