Skip to content

GitLab

Commit a1638f81 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

캘린더, 캘린더세부, 차트 DB연결중

parent 4e3a96be
Show whitespace changes
Inline Side-by-side
Analy.js
View file @ a1638f81
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native'; import { SafeAreaView, FlatList, View, Text, StyleSheet, Dimensions } from 'react-native';
import chartApi from './db/chartData.api';
import { import {
LineChart, LineChart,
BarChart, BarChart,
...@@ -56,6 +57,21 @@ const data2 = { ...@@ -56,6 +57,21 @@ const data2 = {
] ]
}; };
const ChartItem = ({ item }) => {
return (
<>
<View style={{
flexDirection: "row", padding: "5%", borderColor: '#d3d3d3', //light grey
borderWidth: 1, borderTopWidth: 0,
}}>
<Text style={[style.itemText, style.Font]}>{item.name}</Text>
<Text style={[style.itemText, style.Font]}>{item.total}</Text>
<Text></Text>
</View>
</>
);
};
const Analy = () => { const Analy = () => {
const chartConfig = { const chartConfig = {
backgroundGradientFrom: "#abbcd6", //좌측 색 backgroundGradientFrom: "#abbcd6", //좌측 색
...@@ -72,22 +88,45 @@ const Analy = () => { ...@@ -72,22 +88,45 @@ const Analy = () => {
fillShadowGradientOpacity: 1, // 좀 더 진하게만 할 뿐 단색 설정은 못하는 것 같음 fillShadowGradientOpacity: 1, // 좀 더 진하게만 할 뿐 단색 설정은 못하는 것 같음
}; };
const [state, SetState] = useState([]); const [resData, setResData] = useState([])
const getData = async () => {
try {
const resdata = await chartApi.outMoney({ year: 2021, month: 6 })
console.log('db res', resdata)
setResData(resdata)
} catch (error) {
console.log('error in getData', error)
}
}
const renderChart = ({ item }) => {
return (
<ChartItem item={item} />
)
}
useEffect(() => {
getData()
}, [])
return ( return (
<View> <View>
<Text style={style.Font}>여기는 분석 페이지/ 차트 테스트</Text> <Text style={style.Font}>여기는 분석 페이지/ 차트 테스트</Text>
<PieChart <PieChart
data={data1} data={resData}
width={screenWidth} width={screenWidth}
height={screenHeight / 3} //그래프의 높이가 커지기만 height={screenHeight / 3} //그래프의 높이가 커지기만
chartConfig={chartConfig} chartConfig={chartConfig}
accessor={"population"} accessor={"total"}
backgroundColor={"#ffffff"} backgroundColor={"#ffffff"}
// paddingLeft={"15"} // paddingLeft={"15"}
// center={[10, 50]} // center={[10, 50]}
absolute absolute
/> />
<BarChart <FlatList
style={{ backgroundColor: "#FFFFFF" }}
data={resData}
renderItem={renderChart}
keyExtractor={item => item.category}
/>
{/* <BarChart
//style={graphStyle} //style={graphStyle}
data={data2} data={data2}
width={screenWidth} width={screenWidth}
...@@ -95,13 +134,18 @@ const Analy = () => { ...@@ -95,13 +134,18 @@ const Analy = () => {
//yAxisLabel="$" //yAxisLabel="$"
chartConfig={chartConfig} chartConfig={chartConfig}
//verticalLabelRotation={30} //verticalLabelRotation={30}
/> /> */}
</View> </View>
) )
} }
const style = StyleSheet.create({ const style = StyleSheet.create({
Font: { Font: {
fontSize: 24 fontSize: 20
},
itemText: {
paddingRight: "10%",
// paddingLeft: "20%",
// alignItems:"center"
} }
}); });
......
DetailInfo.js
View file @ a1638f81
import React from 'react'; import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native'; import { SafeAreaView, View, Text, StyleSheet, FlatList, TextComponent } from 'react-native';
import calApi from './db/calendarInfo.api';
const DetailItem = ({ item }) => {
return (
<>{
item != [] ? <View style={{
flexDirection: "row", padding: "5%", borderColor: '#d3d3d3', //light grey
borderWidth: 1, borderTopWidth: 0,
}}>
<Text style={item.type === 1 ? style.inputColor : style.outputColor}>{item.category}</Text>
<Text style={[style.itemText, style.Font]}>{item.contents}</Text>
<Text style={[style.itemText, style.Font]}>{item.price}원</Text>
</View> : <View>
<Text>내역이 없습니다.</Text>
</View>
}
</>
);
};
const DetailInfo = ({ route }) => { const DetailInfo = ({ route }) => {
console.log('route', route.params) console.log('route', route.params)
console.log('---------------------------') console.log('---------------------------')
const [resData, setResData] = useState([])
const getDetailData = async () => {
try {
const resdata = await calApi.detailData({ findDate: route.params })
console.log('resdata', resdata)
setResData(resdata)
} catch (error) {
console.log('error in getDetailData', error)
}
}
const renderDetail = ({ item }) => {
return (
<DetailItem item={item} />
)
}
useEffect(() => {
getDetailData()
}, [])
return ( return (
<> <>
<View style={{ padding: '10%' }}> <SafeAreaView>
<Text style={style.Font}>수입</Text> <FlatList
<Text style={{ color: '#1E90FF' }}>{route.params?.input}</Text> data={resData}
<Text>수입 내역들을 보여줄 예정입니다.</Text> renderItem={renderDetail}
</View> keyExtractor={item => item.id}
<View style={{ padding: '10%' }}> />
<Text style={style.Font}>지출</Text> </SafeAreaView>
<Text style={{ color: '#DC143C' }}>{route.params?.output}</Text>
<Text>지출 내역들을 보여줄 예정입니다.</Text>
</View>
</> </>
) )
} }
const style = StyleSheet.create({ const style = StyleSheet.create({
Font: { Font: {
fontSize: 24 fontSize: 20,
color: '#424242'
},
inputColor: {
color: '#1E90FF'
},
outputColor: {
color: '#dc143c'
},
itemText: {
paddingRight: "10%",
paddingLeft: "20%",
// alignItems:"center"
} }
}); });
......
Monthly.js
View file @ a1638f81
import React, { useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import Calendar from './components/Calendar'; import Calendar from './components/Calendar';
import calApi from './db/calendarInfo.api'; import calApi from './db/calendarInfo.api';
const Montly = ({ navigation }) => { const Montly = ({ navigation }) => {
const date = new Date();
const [year, setYear] = useState(date.getFullYear());
const [month, setMonth] = useState(date.getMonth());
const todayM = date.getMonth();
const todayY = date.getFullYear();
const [totalM, setTotalM] = useState([]);
const getData = async () => { const getData = async () => {
try { try {
const totalM = await calApi.getFullData() const resDBdata = await calApi.getFullData({ year: year, month: month })
console.log('db res', totalM) console.log('db res', totalM)
setTotalM(resDBdata)
} catch (error) { } catch (error) {
console.log('error in getData', error) console.log('error in getData', error)
} }
...@@ -15,7 +23,7 @@ const Montly = ({ navigation }) => { ...@@ -15,7 +23,7 @@ const Montly = ({ navigation }) => {
getData() getData()
}, []) }, [])
return ( return (
<Calendar navigation={navigation} MData={totalM} /> <Calendar navigation={navigation} MData={totalM} year={year} setYear={setYear} month={month} setMonth={setMonth} todayM={todayM} todayY={todayY} />
) )
} }
......
components/Calendar.js
View file @ a1638f81
...@@ -38,12 +38,18 @@ const INIT_Data = [ ...@@ -38,12 +38,18 @@ const INIT_Data = [
}, },
]; ];
function Calendar({ navigation, MData }) { function Calendar({
navigation,
MData,
year,
setYear,
month,
setMonth,
todayM,
todayY,
}) {
//console.log('MData', MData)
const date = new Date(); const date = new Date();
const [year, setYear] = useState(date.getFullYear());
const [month, setMonth] = useState(date.getMonth());
const todayM = date.getMonth();
const todayY = date.getFullYear();
const [flatListHeight, setFlatListHeight] = useState(400) const [flatListHeight, setFlatListHeight] = useState(400)
const prevLast = new Date(year, month, 0); //이전 달의 마지막 날 const prevLast = new Date(year, month, 0); //이전 달의 마지막 날
...@@ -83,7 +89,6 @@ function Calendar({ navigation, MData }) { ...@@ -83,7 +89,6 @@ function Calendar({ navigation, MData }) {
} }
} }
//console.log('Dates', Dates)
let istoday = false; let istoday = false;
const renderDate = ({ item }) => { const renderDate = ({ item }) => {
...@@ -98,8 +103,9 @@ function Calendar({ navigation, MData }) { ...@@ -98,8 +103,9 @@ function Calendar({ navigation, MData }) {
if (!(item.date.getMonth() === month)) { if (!(item.date.getMonth() === month)) {
color = '#a9a9a9' color = '#a9a9a9'
} }
return ( return (
<DateItem dateitem={item} textColor={{ color }} onPress={() => navigation.navigate('DetailInfo', item.date)} flatListHeight={flatListHeight / (Dates.length / 7)} /> <DateItem dateitem={item} textColor={{ color }} onPress={() => navigation.navigate('DetailInfo', String(item.date.toJSON()).split(/T/)[0])} flatListHeight={flatListHeight / (Dates.length / 7)} />
) )
} }
const prevBtn = () => { const prevBtn = () => {
......
db/calendarInfo.api.js
View file @ a1638f81
...@@ -4,55 +4,66 @@ import getDb from './moneyDB' ...@@ -4,55 +4,66 @@ import getDb from './moneyDB'
DEBUG(true); DEBUG(true);
enablePromise(true); enablePromise(true);
const getFullData = async () => { const getFullData = async ({ year, month }) => {
const thisFirst = new Date(year, month, 1); //이번 달의 첫째 날
const thisLast = new Date(year, month + 1, 0); //이번 달의 마지막 날
const db = await getDb(); const db = await getDb();
return new Promise((res, rej) => { return new Promise((res, rej) => {
db.transaction(async (tx) => { db.transaction(async (tx) => {
console.log('월간 데이터'); console.log('월간 데이터');
const [txn, results] = await tx.executeSql('SELECT * FROM money WHERE date BETWEEN "2021-07-01" AND "2021-07-31"'); const [txn, results] = await tx.executeSql(`SELECT date, type_id, sum(price) as total from money where date BETWEEN "${String(thisFirst.toJSON()).split(/T/)[0]}" and "${String(thisLast.toJSON()).split(/T/)[0]}" group by date, type_id`);
const temp = []; const temp = [];
for (let i = 0; i < results.rows.length; i++) { if (results.rows.item(0).type_id === 1) {
console.log('item check', results.rows.item(i)); temp.push({ date: results.rows.item(0).date, type: { 'input': results.rows.item(0).total } })
if (results.rows.item(i).type == '수입') {
temp.push({ date: results.rows.item(i).date, type: { 'input': results.rows.item(i).price } })
} }
if (results.rows.item(i).type == '지출') { if (results.rows.item(0).type_id === 2) {
temp.push({ date: results.rows.item(i).date, type: { 'output': results.rows.item(i).price } }) temp.push({ date: results.rows.item(0).date, type: { 'output': results.rows.item(0).total } })
} }
for (let i = 1; i < results.rows.length; i++) {
if (results.rows.item(i).date === results.rows.item(i - 1).date) {
temp.pop()
let { 1: input, 2: output } = {
[results.rows.item(i).type_id]: results.rows.item(i).total,
[results.rows.item(i - 1).type_id]: results.rows.item(i - 1).total,
} }
console.log('temp1', temp) temp.push({ date: results.rows.item(i).date, type: { 'input': input, 'output': output } })
temp.sort(function (a, b) {
return a.date < b.date ? -1 : a.date > b.date ? 1 : 0;
})
const temp2 = [temp[0]]
for (let i = 1; i < temp.length; i++) {
if (temp[i].date === temp[i-1].date) {
let lastObj = temp2.pop()
let newObj = lastObj.type
for (const key in temp[i].type) {
let data = 0
if (newObj.hasOwnProperty(key)) {
console.log('둘이 더할거임', temp[i].date, newObj[key], ' + ', temp[i].type[key], data)
data = newObj[key] + temp[i].type[key]
newObj[key] = data
} else { } else {
newObj[key] = temp[i].type[key] if (results.rows.item(i).type_id === 1) {
temp.push({ date: results.rows.item(i).date, type: { 'input': results.rows.item(i).total } })
}
if (results.rows.item(i).type_id === 2) {
temp.push({ date: results.rows.item(i).date, type: { 'output': results.rows.item(i).total } })
} }
console.log('TETETET', temp[i].date, newObj)
} }
temp2.push({ date: temp[i].date, type: newObj})
} else {
temp2.push(temp[i])
} }
console.log('결과 확인', temp)
res(temp)
})
})
}
const detailData = async ({ findDate }) => {
console.log('findData', findDate)
const db = await getDb();
return new Promise((res, rej) => {
db.transaction(async (tx) => {
console.log('월간 세부 데이터');
const [txn, results] = await tx.executeSql(`SELECT money.type_id, category_name, contents, price FROM money inner JOIN categories on money.category_id = categories.category_id WHERE date="${findDate}"`);
const temp = [];
for (let i = 0; i < results.rows.length; i++) {
console.log('item check', results.rows.item(i));
temp.push({ id: i, category: results.rows.item(i).category_name, contents: results.rows.item(i).contents, price: results.rows.item(i).price, type: results.rows.item(i).type_id })
} }
console.log('temp2', temp2) //console.log('temp', temp)
res(temp2); res(temp);
}) })
}) })
} }
const calApi = { const calApi = {
getFullData getFullData,
detailData
} }
export default calApi; export default calApi;
\ No newline at end of file
db/chartData.api.js 0 → 100644
View file @ a1638f81
import { DEBUG, enablePromise } from 'react-native-sqlite-storage';
import getDb from './moneyDB'
DEBUG(true);
enablePromise(true);
const outMoney = async ({ year, month }) => {
const thisFirst = new Date(year, month, 1); //이번 달의 첫째 날
const thisLast = new Date(year, month + 1, 0); //이번 달의 마지막 날
const db = await getDb();
return new Promise((res, rej) => {
db.transaction(async (tx) => {
console.log('차트 페이지');
const [txn, results] = await tx.executeSql(`SELECT category_id, sum(price) as total from (SELECT type, price, category from money where date BETWEEN "${String(thisFirst.toJSON()).split(/T/)[0]}" and "${String(thisLast.toJSON()).split(/T/)[0]}") WHERE type='지출' group by category`);
const temp = [];
let totalP = 0;
for (let i = 0; i < results.rows.length; i++) {
console.log('chart', results.rows.item(i))
if (results.rows.item(i).category === 1) {
temp.push({
name: "식비", total: results.rows.item(i).total, color: "#b0c4de", legendFontColor: "#7F7F7F",
legendFontSize: 15
})
} else if (results.rows.item(i).category === 2) {
temp.push({
name: "교통비", total: results.rows.item(i).total, color: "#ffa07a", legendFontColor: "#7F7F7F",
legendFontSize: 15
})
} else if (results.rows.item(i).category === 3) {
temp.push({
name: "문화비", total: results.rows.item(i).total, color: "rgba(131, 167, 234, 1)", legendFontColor: "#7F7F7F",
legendFontSize: 15
})
}
}
console.log('chart temp', temp)
res(temp)
})
})
}
const chartApi = {
outMoney
}
export default chartApi;
\ No newline at end of file
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