Commit 13312bec authored by Choi Ga Young's avatar Choi Ga Young
Browse files

스타일 적용중

parent 1e3cf37d
......@@ -80,7 +80,10 @@ function App() {
name="MemoDetails"
component={MemoDetails}
options={{ title: "상세내용" }} />
<Stack.Screen name="DetailInfo" component={DetailInfo} />
<Stack.Screen
name="DetailInfo"
component={DetailInfo}
options={{ title: "일일내역" }} />
<Stack.Screen
name="EditOption"
component={EditOption}
......
......@@ -15,8 +15,8 @@ const ChartItem = ({ item }) => {
borderWidth: 1, borderTopWidth: 0,
}}>
<Text style={[style.itemText, style.Font]}>{item.name}</Text>
<Text style={[style.itemText, style.Font]}>{item.total}</Text>
<Text style={[style.itemText, style.Font]}>{item.percentage}%</Text>
<Text style={[style.itemTextNum, style.Font]}>{item.total}</Text>
<Text style={[style.itemTextNum, style.Font]}>{item.percentage}%</Text>
<Text></Text>
</View>
</>
......@@ -91,7 +91,7 @@ const ChartM = ({
accessor={"total"}
backgroundColor={"#ffffff"}
absolute
/> : <Text style={{ fontSize: 30, textAlign: "center" }}> 지출 내역이 없습니다.</Text>
/> : <Text style={style.infoText}> 지출 내역이 없습니다.</Text>
}
<FlatList
style={{ backgroundColor: "#FFFFFF" }}
......@@ -105,10 +105,23 @@ const ChartM = ({
}
const style = StyleSheet.create({
Font: {
fontSize: 20
fontSize: 20,
fontFamily: 'GowunDodum-Regular'
},
itemTextNum: {
flex: 1,
textAlign: "center",
fontFamily: 'GowunDodum-Regular'
},
itemText: {
paddingRight: "10%"
flex: 1,
fontFamily: 'GowunDodum-Regular'
},
infoText: {
fontSize: 30,
textAlign: "center",
marginTop: "20%",
fontFamily: 'GowunDodum-Regular'
}
});
......
......@@ -8,6 +8,7 @@ const screenWidth = Dimensions.get("window").width;
const screenHeight = Dimensions.get("window").height;
const ChartY = ({ resDataY, year, setYear }) => {
const chartConfig = {
backgroundGradientFrom: "#ffffff", //좌측 색
backgroundGradientFromOpacity: 1,
......@@ -18,7 +19,6 @@ const ChartY = ({ resDataY, year, setYear }) => {
barPercentage: 0.5, // 그래프 width
useShadowColorFromDataset: false,// optional, default is false
fillShadowGradientOpacity: 1, // 좀 더 진하게만 할 뿐 단색 설정은 못하는 것 같음
};
const prevBtn = () => {
setYear(year - 1)
......@@ -27,38 +27,57 @@ const ChartY = ({ resDataY, year, setYear }) => {
setYear(year + 1)
}
const convertY = (y) => {
console.log('convert y=====', y)
let res = '';
if (y >= 1000000000) {
res = (y / 1000000000).toFixed(2) + "B"
console.log('단위변환중', res)
} else if (y >= 1000000) {
res = (y / 1000000).toFixed(2) + "M"
console.log('단위변환중', res)
} else if (y >= 1000) {
res = (y / 1000).toFixed(2) + "K"
console.log('단위변환중', res)
}
return res
}
console.log('잠만확인', resDataY.temp1[0].datasets[0].data, '|', resDataY.temp2[0].datasets[0].data)
let totalYI = (resDataY.temp1[0].datasets[0].data).reduce((acc, curr) => acc + curr, 0);
let totalYO = (resDataY.temp2[0].datasets[0].data).reduce((acc, curr) => acc + curr, 0);
console.log('합산 확인', totalYI, '|', totalYO)
return (
<>
<View style={{ flexDirection: 'row' }}>
<Button icon={
<Ionicons name='chevron-back-sharp' onPress={prevBtn} size={15} color='black' />
} type='clear' />
<Text>{year}</Text>
<Text style={{ fontFamily: 'GowunDodum-Regular' }}>{year}</Text>
<Button icon={
<Ionicons name='chevron-forward-sharp' onPress={nextBtn} size={15} color='black' />
} type='clear' />
</View>
<View style={{ flexDirection: 'row', justifyContent: "space-around" }}>
<Text style={[{ color: '#1E90FF' }, style.Font]}>수입: {(totalYI).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</Text>
<Text style={[{ color: '#dc143c' }, style.Font]}>지출: {(totalYO).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")} </Text>
</View>
<View>
<Text style={style.Font}>수입: {(totalYI).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</Text>
<BarChart
style={{ marginBottom: "2%", marginTop: "2%" }}
data={resDataY.temp1[0]}
width={screenWidth}
height={screenHeight / 3}
chartConfig={{ ...chartConfig, fillShadowGradient: '#1E90FF' }}
chartConfig={{ ...chartConfig, fillShadowGradient: '#1E90FF', formatYLabel: convertY }}
fromZero={true}
/>
<Text style={style.Font}>지출: {(totalYO).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")} </Text>
<BarChart
style={{ marginTop: "2%" }}
data={resDataY.temp2[0]}
width={screenWidth}
height={screenHeight / 3}
chartConfig={{ ...chartConfig, fillShadowGradient: '#DC143C' }}
chartConfig={{ ...chartConfig, fillShadowGradient: '#DC143C', formatYLabel: convertY }}
fromZero={true}
/>
</View>
......@@ -69,7 +88,7 @@ const style = StyleSheet.create({
Font: {
textAlign: "center",
fontSize: 20,
fontFamily: 'Jua-Regular'
fontFamily: 'GowunDodum-Regular'
},
});
......
......@@ -10,9 +10,9 @@ const DetailItem = ({ item }) => {
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>
<Text style={[style.itemText, item.type === 1 ? style.inputColor : style.outputColor]}>{item.category}</Text>
<Text style={[style.itemTextNum, style.Font]}>{item.contents}</Text>
<Text style={[style.itemTextNum, style.Font]}>{item.price}</Text>
</View>
</>
);
......@@ -47,8 +47,8 @@ const DetailInfo = ({ route }) => {
data={resData}
renderItem={renderDetail}
keyExtractor={item => item.id}
/> : <View>
<Text style={{textAlign:"center", fontSize:20}}>내역이 없습니다.</Text>
/> : <View style={{ marginTop: "20%" }}>
<Text style={{ textAlign: "center", fontSize: 20 }}>내역이 없습니다.</Text>
</View>
}
......@@ -67,10 +67,12 @@ const style = StyleSheet.create({
outputColor: {
color: '#dc143c'
},
itemTextNum: {
flex: 1,
textAlign: "center"
},
itemText: {
paddingRight: "10%",
paddingLeft: "20%",
// alignItems:"center"
flex: 1
}
});
......
import React from 'react';
import { ButtonGroup } from 'react-native-elements';
import { StyleSheet, Text } from 'react-native';
import { color } from 'react-native-elements/dist/helpers';
const ButtonsForm = (props) => {
const components = [];
for (let i = 0; i < props.group.length ; i++) {
components[i] = { element: () => <Text>{props.group[i]}</Text> }
for (let i = 0; i < props.group.length; i++) {
components[i] = {
element: () => <Text style={{
fontSize: 20,
fontFamily: 'GowunDodum-Regular'
}} > {props.group[i]}</Text >
}
}
return (
......@@ -17,6 +23,7 @@ const ButtonsForm = (props) => {
containerStyle={style.container}
selectedButtonStyle={style.selectedButton}
selectedTextStyle={style.selectedText}
/>
);
};
......@@ -27,14 +34,15 @@ const style = StyleSheet.create({
height: 50,
flexDirection: 'row',
alignItems: "center",
backgroundColor: "#f5f5f5",
},
text: {
color: "#808080",
fontSize: 24
backgroundColor: '#f5f5f5'
},
// text: {
// color: "#808080",
// fontSize: 24,
// fontFamily: 'GowunDodum-Regular'
// },
selectedButton: {
backgroundColor: "#adadad",
backgroundColor: '#bfd3f2'
},
selectedText: {
color: "#1467ff",
......
......@@ -103,7 +103,7 @@ function Calendar({
if (!(item.date.getMonth() === month)) {
color = '#a9a9a9'
}
return (
<DateItem dateitem={item} textColor={{ color }} onPress={() => navigation.navigate('DetailInfo', String(item.date.toJSON()).split(/T/)[0])} flatListHeight={flatListHeight / (Dates.length / 7)} />
)
......@@ -158,6 +158,7 @@ function Calendar({
<Text style={style.DayText}></Text>
</View>
<FlatList
style={{ backgroundColor: "#FFFFFF" }}
onLayout={onLayout}
data={Dates}
numColumns={7}
......@@ -176,6 +177,7 @@ const style = StyleSheet.create({
},
Head: { //00년00월
fontSize: 24,
fontFamily: 'GowunDodum-Regular'
},
Container: { //년월, 버튼 뷰에 적용
justifyContent: "center",
......@@ -198,7 +200,9 @@ const style = StyleSheet.create({
DayText: {
flex: 1,
textAlign: 'center',
color: '#FFFFFF'
color: '#FFFFFF',
fontFamily: 'GowunDodum-Regular',
fontWeight: "bold"
},
});
......
import { DEBUG, enablePromise } from 'react-native-sqlite-storage';
import getDb from './moneyDB'
import { getDate } from '../utils/dateFunction'
DEBUG(true);
enablePromise(true);
......@@ -19,7 +20,7 @@ const outMoney = async ({ year, month }) => {
return new Promise((res, rej) => {
db.transaction(async (tx) => {
console.log('차트 페이지');
const [txn, results] = await tx.executeSql(`SELECT category_id, category_name, sum(price) as total from (SELECT money.type_id, price, money.category_id, category_name FROM money inner JOIN categories on money.category_id = categories.category_id where date BETWEEN "${String(thisFirst.toJSON()).split(/T/)[0]}" and "${String(thisLast.toJSON()).split(/T/)[0]}") WHERE type_id=2 group by category_id`);
const [txn, results] = await tx.executeSql(`SELECT category_id, category_name, sum(price) as total from (SELECT money.type_id, price, money.category_id, category_name FROM money inner JOIN categories on money.category_id = categories.category_id where date BETWEEN "${getDate(thisFirst)}" and "${getDate(thisLast)}") WHERE type_id=2 group by category_id`);
const temp = [];
for (let i = 0; i < results.rows.length; i++) {
console.log('chart', results.rows.item(i))
......
export function getDate () {
const date = new Date();
export function getDate(item) {
let date = ''
if (item) {
date = new Date(item)
} else {
date = new Date()
}
const tempY = date.getFullYear();
let tempM = date.getMonth()+1;
let tempM = date.getMonth() + 1;
tempM = tempM > 9 ? tempM : "0" + tempM;
let tempD = date.getDate();
tempD = tempD > 9 ? tempD : "0" + tempD;
......
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