113 lines
3.2 KiB
JavaScript
113 lines
3.2 KiB
JavaScript
import { Fragment, useEffect, useState } from 'react';
|
|
|
|
import Button from '../../components/common/button/Button';
|
|
|
|
import { TableStyle, TableInfo, ListOption, IndexTableWrap } from '../../styles/Components';
|
|
import { PlayTimeSearchBar } from '../../components/IndexManage/index';
|
|
import { PlaytimeIndexExport, PlaytimeIndexView } from '../../apis';
|
|
|
|
const PlayTimeContent = () => {
|
|
const token = sessionStorage.getItem('token');
|
|
let d = new Date();
|
|
const START_DATE = new Date(new Date(d.setDate(d.getDate() - 1)).setHours(0, 0, 0, 0));
|
|
const END_DATE = new Date();
|
|
|
|
const [dataList, setDataList] = useState([]);
|
|
const [resultData, setResultData] = useState([]);
|
|
|
|
const [sendDate, setSendDate] = useState(START_DATE);
|
|
const [finishDate, setFinishDate] = useState(END_DATE);
|
|
|
|
useEffect(() => {
|
|
fetchData(START_DATE, END_DATE);
|
|
}, []);
|
|
|
|
// 이용자 지표 데이터
|
|
const fetchData = async (startDate, endDate) => {
|
|
const startDateToLocal =
|
|
startDate.getFullYear() +
|
|
'-' +
|
|
(startDate.getMonth() + 1 < 9 ? '0' + (startDate.getMonth() + 1) : startDate.getMonth() + 1) +
|
|
'-' +
|
|
(startDate.getDate() < 9 ? '0' + startDate.getDate() : startDate.getDate());
|
|
|
|
const endDateToLocal =
|
|
endDate.getFullYear() +
|
|
'-' +
|
|
(endDate.getMonth() + 1 < 9 ? '0' + (endDate.getMonth() + 1) : endDate.getMonth() + 1) +
|
|
'-' +
|
|
(endDate.getDate() < 9 ? '0' + endDate.getDate() : endDate.getDate());
|
|
|
|
setDataList(await PlaytimeIndexView(token, startDateToLocal, endDateToLocal));
|
|
|
|
setSendDate(startDateToLocal);
|
|
setFinishDate(endDateToLocal);
|
|
};
|
|
|
|
// 검색 함수
|
|
const handleSearch = (send_dt, end_dt) => {
|
|
fetchData(send_dt, end_dt);
|
|
};
|
|
|
|
// 엑셀 다운로드
|
|
const handleXlsxExport = () => {
|
|
const fileName = 'Caliverse_PlayTime_Index.xlsx';
|
|
PlaytimeIndexExport(token, fileName, sendDate, finishDate);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<PlayTimeSearchBar setResultData={setResultData} resultData={resultData} handleSearch={handleSearch} fetchData={fetchData} />
|
|
<TableInfo>
|
|
<ListOption>
|
|
<Button theme="line" text="엑셀 다운로드" handleClick={handleXlsxExport} />
|
|
</ListOption>
|
|
</TableInfo>
|
|
<IndexTableWrap>
|
|
<TableStyle>
|
|
<caption></caption>
|
|
<thead>
|
|
<tr>
|
|
<th rowSpan="2" width="140">
|
|
일자
|
|
</th>
|
|
<th colSpan="4" width="520">
|
|
유저수
|
|
</th>
|
|
<th rowSpan="2" width="160">
|
|
총 누적 플레이타임(분)
|
|
</th>
|
|
<th rowSpan="2" width="160">
|
|
1인당 평균 플레이타임(분)
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<th>30분 이내</th>
|
|
<th>30분 ~ 1시간</th>
|
|
<th>1시간 ~ 3시간</th>
|
|
<th>3시간 이상</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{dataList.playtime &&
|
|
dataList.playtime.map(time => (
|
|
<tr key={time.date}>
|
|
<td>{time.date}</td>
|
|
{time.user_cnt.map((cnt, index) => (
|
|
<td className="text-left" key={index}>
|
|
{cnt}
|
|
</td>
|
|
))}
|
|
<td className="text-left">{time.total_time}</td>
|
|
<td className="text-left">{time.average_time}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</TableStyle>
|
|
</IndexTableWrap>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PlayTimeContent;
|