프론트에서는 chart js 백에서는 for문을를 적극 활용해서 그래프를 완성시켰다. chart js에서 그래프 형식들을 다 정해줘서 나는 백엔드에서 받은 값을 넣기만 하면 됐다.
function post_study_time_graph() {
$.ajax({
type: "POST",
url: "/line-graph",
headers: {
Authorization: getCookie('access_token')
},
data: {
year: $("select[name=year]").val(),
month: $("select[name=month]").val()
},
success: function (response) {
let day_list = response['day_list']
let day_time_list = response['day_time_list']
let study_time_graph = document.getElementById('study_time_graph').getContext('2d');
let barChart = new Chart(study_time_graph, {
type: 'line',
data: {
labels: day_list,
datasets: [{
label: "초",
data: day_time_list,
backgroundColor: 'skyblue',
}]
},
options: {
maintainAspectRatio: false,
title: {
display: true,
text: '월별 공부시간',
fontSize: 30,
fontColor: 'green'
},
legend: {
display: false,
align: top
},
scales: {
yAxes: [{
ticks: {
callback: function(label, index, labels) {
return parseInt(label/3600) +'h';
},
beginAtZero: true,
stepSize: 3600,
}
}]
}
}
});
}
})
}
백에서는 그달에 있는 객체들을 다 불러오고 비어있는 날에는 0을 넣었다.
# 월별 시간그래프
@app.route('/line-graph', methods=['POST'])
@login_required
def post_study_time_graph():
user_nickname = request.user['nick_name']
year = int(request.form['year'])
month = int(request.form['month'])
monthly_user_data = list(db.time.find({
'nick_name': user_nickname,
'year': year,
'month': month}, {'_id': False}).sort("day", 1))
# 만약 데이터가 없는 날짜는 0으로 처리한다.
day_list = []
day_time_list = []
for i in range(31):
day_list.append(i)
day_time_list.append(0)
for day in monthly_user_data:
day_time_list[day['day']] = day['study_time']
return jsonify({'day_list': day_list, 'day_time_list': day_time_list})
생각보다 어려워서 아래와 같이 어떤식으로 코드를 짤지 계획하고 시작했다.확실히 계획하고 시작하니 한결 괜찮다는 느낌을 받았다.
end button -> onclick(checkout_choice())
if (현재시간이 자정이면){
var 전날 공부시간을 저장 => 어디다가?쿠키
}
funtion checkout_choice {
if (전날 공부시간이 있으면) {
funtion midnight()
}else{
funtion checkout()
}
}
}
function checkout() {
ajex{
공부시간,
status
}
}
funtion midnight(){
ajax{
전날공부시간 -> 백에서 전날 데이터로 저장
지금까지 공부시간 -> 백에서 오늘 데이터로 저장
status
}
}
}
이런식으로 매일 공부한걸 정리하면서 공부를 진행해봤다. 귀찮을줄 알았는데 오히려 개념을 확실히 집고 넘어간다느느낌이 있어서 앞으로도 이렇게 할 거같다.
이번주도 힘든 한주였다. 우리 자체 스프린트가 12일까지라 오늘까지 어떻게든 기능구현을 완료하려고 다들 열심히 해주었다. 잠도 제대로 못잤는데 그래도 기분이 태도가 되지않도록 주의해야겠다.