Skip to content

GitLab

Commit 0ad8ca36 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

차트 적용중

parent cf2c29e5
Hide whitespace changes
Inline Side-by-side
Analy.js
View file @ 0ad8ca36
import React from 'react'; import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native'; import { View, Text, StyleSheet, Dimensions } from 'react-native';
import {
LineChart,
BarChart,
PieChart,
ProgressChart,
ContributionGraph,
StackedBarChart
} from "react-native-chart-kit";
const screenWidth = Dimensions.get("window").width;
const screenHeight = Dimensions.get("window").height;
const data1 = [
{
name: "Seoul",
population: 21500000,
color: "rgba(131, 167, 234, 1)",
legendFontColor: "#7F7F7F",
legendFontSize: 15
},
{
name: "Toronto",
population: 2800000,
color: "#d8bfd8",
legendFontColor: "#7F7F7F",
legendFontSize: 15
},
{
name: "Beijing",
population: 1276120,
color: "#87ceeb",
legendFontColor: "#7F7F7F",
legendFontSize: 15
},
{
name: "New York",
population: 8538000,
color: "#fff5ee",
legendFontColor: "#7F7F7F",
legendFontSize: 15
},
{
name: "Moscow",
population: 11920000,
color: "#b0c4de",
legendFontColor: "#7F7F7F",
legendFontSize: 15
}
];
const data2 = {
labels: ["Jan", "Feb", "Mar", "April", "May", "June"],
datasets: [
{
data: [20, 45, 28, 80, 99, 43]
}
]
};
const Analy = () => {
const chartConfig = {
backgroundGradientFrom: "#abbcd6", //좌측 색
backgroundGradientFromOpacity: 0.5,
backgroundGradientTo: "#E6DDC5", // 우측 색
backgroundGradientToOpacity: 0.2,
backgroundColor: "#ffffff", // 어디에 적용된건지 잘 모르겠음
color: (opacity = 1) => `rgba(0, 93, 232, ${opacity})`, // data의 색상 계산할 때 사용하는 함수
//color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
strokeWidth: 2, // optional, default 3
barPercentage: 0.5, // 그래프 width
useShadowColorFromDataset: false,// optional, default is false
//fillShadowGradient: 'blue',
fillShadowGradientOpacity: 1, // 좀 더 진하게만 할 뿐 단색 설정은 못하는 것 같음
const Analy =() =>{ };
return( const [state, SetState] = useState([]);
return (
<View> <View>
<Text style={style.Font}>여기는 분석 페이지</Text> <Text style={style.Font}>여기는 분석 페이지/ 차트 테스트</Text>
<PieChart
data={data1}
width={screenWidth}
height={screenHeight / 3} //그래프의 높이가 커지기만
chartConfig={chartConfig}
accessor={"population"}
backgroundColor={"#ffffff"}
// paddingLeft={"15"}
// center={[10, 50]}
absolute
/>
<BarChart
//style={graphStyle}
data={data2}
width={screenWidth}
height={screenHeight / 3}
//yAxisLabel="$"
chartConfig={chartConfig}
//verticalLabelRotation={30}
/>
</View> </View>
) )
} }
const style = StyleSheet.create({ const style = StyleSheet.create({
Font: { Font: {
fontSize:24 fontSize: 24
} }
}); });
......
App.js
View file @ 0ad8ca36
...@@ -2,12 +2,13 @@ import React, { useState } from 'react'; ...@@ -2,12 +2,13 @@ import React, { useState } from 'react';
import { StyleSheet, View, Text, TextInput, Button } from 'react-native'; import { StyleSheet, View, Text, TextInput, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native'; import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import Ionicons from 'react-native-vector-icons/Ionicons'; import Ionicons from 'react-native-vector-icons/Ionicons';
import Monthly from './Monthly'; import Monthly from './Monthly';
// import Analy from './Analy'; import Analy from './Analy';
import Calendar from './Calendar';
import PostMoney from './PostMoney'; import PostMoney from './PostMoney';
import InsertCat from './InsertCat'; import InsertCat from './InsertCat';
import DetailInfo from './DetailInfo';
function MainScreen({ navigation }) { function MainScreen({ navigation }) {
const [number, onChangeNumber] = useState(null) const [number, onChangeNumber] = useState(null)
...@@ -33,44 +34,56 @@ function MainScreen({ navigation }) { ...@@ -33,44 +34,56 @@ function MainScreen({ navigation }) {
onPress={() => navigation.navigate('Monthly')} onPress={() => navigation.navigate('Monthly')}
/> />
<InsertCat /> <InsertCat />
</> </>
) )
} }
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
function App() { function Home() {
return ( return (
<NavigationContainer> <Tab.Navigator screenOptions={({ route }) => ({
<Tab.Navigator screenOptions={({ route }) => ({ tabBarIcon: ({ focused, color, size }) => {
tabBarIcon: ({ focused, color, size }) => { let iconName;
let iconName;
if (route.name === 'Main') { if (route.name === 'Main') {
iconName = focused iconName = focused
? 'home' ? 'home'
: 'home-outline'; : 'home-outline';
} else if (route.name === 'Monthly') { } else if (route.name === 'Monthly') {
iconName = focused ? 'calendar' : 'calendar-outline'; iconName = focused ? 'calendar' : 'calendar-outline';
} else if (route.name === 'Analy') { } else if (route.name === 'Analy') {
iconName = focused ? 'bar-chart' : 'bar-chart-outline'; iconName = focused ? 'bar-chart' : 'bar-chart-outline';
} else if (route.name === 'Calendar') { }
iconName = focused ? 'calendar-sharp':'calendar-sharp'; // else if (route.name === 'Calendar') {
} // iconName = focused ? 'calendar-sharp' : 'calendar-sharp';
// }
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: 'skyblue',
inactiveTintColor: 'gray',
}}>
<Tab.Screen name="Main" component={MainScreen} />
<Tab.Screen name="Monthly" component={Monthly} />
{/*<Tab.Screen name="Calendar" component={Calendar} />*/}
<Tab.Screen name="Analy" component={Analy} />
<Tab.Screen name="PostMoney" component={PostMoney} />
</Tab.Navigator>
)
}
// You can return any component that you like here! function App() {
return <Ionicons name={iconName} size={size} color={color} />; return (
}, <NavigationContainer>
})} <Stack.Navigator>
tabBarOptions={{ <Stack.Screen options={{headerShown: false}} name="Home" component={Home} />
activeTintColor: 'skyblue', <Stack.Screen name="DetailInfo" component={DetailInfo} />
inactiveTintColor: 'gray', </Stack.Navigator>
}}>
<Tab.Screen name="Main" component={MainScreen} />
<Tab.Screen name="Monthly" component={Monthly} />
<Tab.Screen name="Calendar" component={Calendar} />
<Tab.Screen name="Analy" component={PostMoney} />
</Tab.Navigator>
</NavigationContainer> </NavigationContainer>
); );
} }
...@@ -88,7 +101,7 @@ const style = StyleSheet.create({ ...@@ -88,7 +101,7 @@ const style = StyleSheet.create({
Contents: { Contents: {
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
margin:10 margin: 10
} }
}); });
export default App; export default App;
DetailInfo.js
View file @ 0ad8ca36
import React from 'react'; import React from 'react';
import { View, Text, StyleSheet } from 'react-native'; import { View, Text, StyleSheet } from 'react-native';
const DetailInfo =() =>{ const DetailInfo = ({ route }) => {
return( console.log('route', route.params)
<View> console.log('---------------------------')
<Text style={style.Font}>여기는 디테일 스크린</Text> return (
<Text>날짜를 선택하면 세부적인 수입/지출 내역을 볼 수 있는 화면 입니다.</Text> <>
</View> <View style={{ padding: '10%' }}>
<Text style={style.Font}>수입</Text>
<Text style={{ color: '#1E90FF' }}>{route.params?.input}</Text>
<Text>수입 내역들을 보여줄 예정입니다.</Text>
</View>
<View style={{ padding: '10%' }}>
<Text style={style.Font}>지출</Text>
<Text style={{ color: '#DC143C' }}>{route.params?.output}</Text>
<Text>지출 내역들을 보여줄 예정입니다.</Text>
</View>
</>
) )
} }
const style = StyleSheet.create({ const style = StyleSheet.create({
Font: { Font: {
fontSize:24 fontSize: 24
} }
}); });
......
Monthly.js
View file @ 0ad8ca36
import React, { useState, useEffect } from 'react'; import React from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native'; import Calendar from './components/Calendar';
const INIT_Data = [
{
date: "2021-06-30",
type: { 'input': 50000, 'output': 3500 },
},
{
date: "2021-07-01",
type: { 'input': 100000, 'output': 2000 },
},
{
date: "2021-07-05",
type: { 'input': 15000, 'output': 2010 },
},
{
date: "2021-07-10",
type: { 'input': 10000, 'output': 1000 },
},
];
const DateItem = ({ dateitem, textColor, onPress, flatListHeight }) => {
return (
<TouchableOpacity onPress={onPress}
style={[style.dateContainer]}>
<Text style={textColor}>{dateitem.date.getDate()}</Text>
{
dateitem.type &&
<View>
<Text style={{ color: '#1E90FF' }}>{dateitem.type.input ? dateitem.type.input : null}</Text>
<Text style={{ color: '#DC143C' }}>{dateitem.type.output ? dateitem.type.output : null}</Text>
</View>
}
</TouchableOpacity>
);
};
const Montly = () => { const Montly = () => {
// const [flatListHeight, setFlatListHeight] = useState(400)
const temp = [];
for (let i = 0; i < 12; i++) {
temp.push({ date: new Date(2021, 6, i) })
}
console.log('temp', temp[0].date)
const DBDates = [];
for (let i = 0; i < INIT_Data.length; i++) {
// console.log('날짜만 가져오기', INIT_Data[i].date, 'index', i)
const str = INIT_Data[i].date
DBDates.push({ date: new Date(Number(str.slice(0, 4)), Number(str.slice(5, 7)) - 1, Number(str.slice(8, 10))), type: INIT_Data[i].type })
}
// console.log('DBDates', DBDates)
for (let i = 0; i < temp.length; i++) {
const idx = DBDates.findIndex(obj => obj.date.getTime() == temp[i].date.getTime())
if (idx !== -1) {
temp[i] = DBDates[idx]
}
}
console.log('reTemp', temp)
//reTemp 30
// const date3 = new Date(2021, 6, 1);
// const dy = date3.getFullYear();
// const dm = ('0' + (date3.getMonth() + 1)).slice(-2);
// const dd = ('0' + date3.getDate()).slice(-2);
// ;
// // console.log('eachValue', dy, dm, dd)
const renderDate = ({ item }) => {
// let color = '#000000';
// if (item.datesVal.getDate() === date.getDate() && month === todayM && year === todayY) {
// istoday = true;
// }
// if (istoday) {
// color = '#6495ed'
// istoday = false;
// }
// if (!(item.datesVal.getMonth() === month)) {
// color = '#a9a9a9'
// }
return (
<DateItem dateitem={item} />
)
}
// const onLayout = (event) => {
// const { x, y, height, width } = event.nativeEvent.layout;
// setFlatListHeight(height)
// }
return ( return (
<> <Calendar />
<View>
<Text style={style.Font}>여기는 월별 페이지</Text>
<Text style={style.Font}>달력을 추가할 예정입니다.</Text>
</View>
<FlatList
data={temp}
numColumns={7}
renderItem={renderDate}
keyExtractor={item => item.date}
/>
</>
) )
} }
const style = StyleSheet.create({
Font: {
fontSize: 24
}
});
export default Montly; export default Montly;
\ No newline at end of file
Calendar.js → components/Calendar.js
View file @ 0ad8ca36
...@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'; ...@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import { SafeAreaView, StyleSheet, View, Text, FlatList, TouchableOpacity } from 'react-native'; import { SafeAreaView, StyleSheet, View, Text, FlatList, TouchableOpacity } from 'react-native';
import { Button } from 'react-native-elements'; import { Button } from 'react-native-elements';
import Ionicons from 'react-native-vector-icons/Ionicons'; import Ionicons from 'react-native-vector-icons/Ionicons';
import DetailInfo from '../DetailInfo';
const DateItem = ({ dateitem, textColor, onPress, flatListHeight }) => { const DateItem = ({ dateitem, textColor, onPress, flatListHeight }) => {
return ( return (
...@@ -37,7 +38,7 @@ const INIT_Data = [ ...@@ -37,7 +38,7 @@ const INIT_Data = [
}, },
]; ];
function Calendar() { function Calendar({ navigation }) {
const date = new Date(); const date = new Date();
const [year, setYear] = useState(date.getFullYear()); const [year, setYear] = useState(date.getFullYear());
const [month, setMonth] = useState(date.getMonth()); const [month, setMonth] = useState(date.getMonth());
...@@ -57,7 +58,7 @@ function Calendar() { ...@@ -57,7 +58,7 @@ function Calendar() {
// 이번 달 달력에 쓰일 날짜들. 이전달 다음달 전부 포함 // 이번 달 달력에 쓰일 날짜들. 이전달 다음달 전부 포함
const Dates = []; const Dates = [];
const DBDates = []; const DBDates = [];
if (thisFirstDay != 0) { // 첫째 날이 일요일이 아니라면 if (thisFirstDay !== 0) { // 첫째 날이 일요일이 아니라면
for (let i = 0; i < thisFirstDay; i++) { for (let i = 0; i < thisFirstDay; i++) {
Dates.unshift({ date: new Date(year, month - 1, prevLastDate - i) }) Dates.unshift({ date: new Date(year, month - 1, prevLastDate - i) })
} }
...@@ -76,12 +77,13 @@ function Calendar() { ...@@ -76,12 +77,13 @@ function Calendar() {
} }
for (let i = 0; i < Dates.length; i++) { for (let i = 0; i < Dates.length; i++) {
const idx = DBDates.findIndex(obj => obj.date.getTime() == Dates[i].date.getTime()) const idx = DBDates.findIndex(obj => obj.date.getTime() === Dates[i].date.getTime())
if (idx !== -1) { if (idx !== -1) {
Dates[i] = DBDates[idx] Dates[i] = DBDates[idx]
} }
} }
//console.log('Dates', Dates)
let istoday = false; let istoday = false;
const renderDate = ({ item }) => { const renderDate = ({ item }) => {
...@@ -97,7 +99,7 @@ function Calendar() { ...@@ -97,7 +99,7 @@ function Calendar() {
color = '#a9a9a9' color = '#a9a9a9'
} }
return ( return (
<DateItem dateitem={item} textColor={{ color }} flatListHeight={flatListHeight / (Dates.length/ 7)} /> <DateItem dateitem={item} textColor={{ color }} onPress={() => navigation.navigate('DetailInfo',item.date)} flatListHeight={flatListHeight / (Dates.length / 7)} />
) )
} }
const prevBtn = () => { const prevBtn = () => {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment