Skip to content

GitLab

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

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

parent 4e3a96be
Hide whitespace changes
Inline Side-by-side
Analy.js
View file @ a1638f81
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 {
LineChart,
BarChart,
......@@ -56,10 +57,25 @@ 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 chartConfig = {
backgroundGradientFrom: "#abbcd6", //좌측 색
backgroundGradientFromOpacity: 0.5,
backgroundGradientFromOpacity: 0.5,
backgroundGradientTo: "#E6DDC5", // 우측 색
backgroundGradientToOpacity: 0.2,
backgroundColor: "#ffffff", // 어디에 적용된건지 잘 모르겠음
......@@ -72,22 +88,45 @@ const Analy = () => {
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 (
<View>
<Text style={style.Font}>여기는 분석 페이지/ 차트 테스트</Text>
<PieChart
data={data1}
data={resData}
width={screenWidth}
height={screenHeight / 3} //그래프의 높이가 커지기만
chartConfig={chartConfig}
accessor={"population"}
accessor={"total"}
backgroundColor={"#ffffff"}
// paddingLeft={"15"}
// center={[10, 50]}
absolute
/>
<BarChart
<FlatList
style={{ backgroundColor: "#FFFFFF" }}
data={resData}
renderItem={renderChart}
keyExtractor={item => item.category}
/>
{/* <BarChart
//style={graphStyle}
data={data2}
width={screenWidth}
......@@ -95,13 +134,18 @@ const Analy = () => {
//yAxisLabel="$"
chartConfig={chartConfig}
//verticalLabelRotation={30}
/>
/> */}
</View>
)
}
const style = StyleSheet.create({
Font: {
fontSize: 24
fontSize: 20
},
itemText: {
paddingRight: "10%",
// paddingLeft: "20%",
// alignItems:"center"
}
});
......
DetailInfo.js
View file @ a1638f81
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import React, { useEffect, useState } from 'react';
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 }) => {
console.log('route', route.params)
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 (
<>
<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>
<SafeAreaView>
<FlatList
data={resData}
renderItem={renderDetail}
keyExtractor={item => item.id}
/>
</SafeAreaView>
</>
)
}
const style = StyleSheet.create({
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 calApi from './db/calendarInfo.api';
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 () => {
try {
const totalM = await calApi.getFullData()
const resDBdata = await calApi.getFullData({ year: year, month: month })
console.log('db res', totalM)
setTotalM(resDBdata)
} catch (error) {
console.log('error in getData', error)
}
......@@ -15,7 +23,7 @@ const Montly = ({ navigation }) => {
getData()
}, [])
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 = [
},
];
function Calendar({ navigation, MData }) {
function Calendar({
navigation,
MData,
year,
setYear,
month,
setMonth,
todayM,
todayY,
}) {
//console.log('MData', MData)
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 prevLast = new Date(year, month, 0); //이전 달의 마지막 날
......@@ -83,7 +89,6 @@ function Calendar({ navigation, MData }) {
}
}
//console.log('Dates', Dates)
let istoday = false;
const renderDate = ({ item }) => {
......@@ -98,8 +103,9 @@ function Calendar({ navigation, MData }) {
if (!(item.date.getMonth() === month)) {
color = '#a9a9a9'
}
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 = () => {
......
db/calendarInfo.api.js
View file @ a1638f81
......@@ -4,55 +4,66 @@ import getDb from './moneyDB'
DEBUG(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();
return new Promise((res, rej) => {
db.transaction(async (tx) => {
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 = [];
for (let i = 0; i < results.rows.length; i++) {
console.log('item check', results.rows.item(i));
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 == '지출') {
temp.push({ date: results.rows.item(i).date, type: { 'output': results.rows.item(i).price } })
}
if (results.rows.item(0).type_id === 1) {
temp.push({ date: results.rows.item(0).date, type: { 'input': results.rows.item(0).total } })
}
if (results.rows.item(0).type_id === 2) {
temp.push({ date: results.rows.item(0).date, type: { 'output': results.rows.item(0).total } })
}
console.log('temp1', temp)
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 {
newObj[key] = temp[i].type[key]
}
console.log('TETETET', temp[i].date, newObj)
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,
}
temp2.push({ date: temp[i].date, type: newObj})
temp.push({ date: results.rows.item(i).date, type: { 'input': input, 'output': output } })
} else {
temp2.push(temp[i])
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('temp2', temp2)
res(temp2);
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('temp', temp)
res(temp);
})
})
}
const calApi = {
getFullData
getFullData,
detailData
}
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