110 lines
3.3 KiB
JavaScript
110 lines
3.3 KiB
JavaScript
import { useEffect, useRef, useState } from 'react';
|
|
|
|
import { TableStyle, TableInfo, ListOption, IndexTableWrap } from '../../styles/Components';
|
|
import { DailyDashBoard } from '../../components/IndexManage/index';
|
|
|
|
import { userIndexView } from '../../apis';
|
|
import { ExcelDownButton } from '../common';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { formatStringDate } from '../../utils';
|
|
import { AnimatedPageWrapper } from '../common/Layout';
|
|
import { UserIndexSearchBar } from '../searchBar';
|
|
|
|
const UserContent = () => {
|
|
const token = sessionStorage.getItem('token');
|
|
const { t } = useTranslation();
|
|
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 [loading, setLoading] = useState(false);
|
|
|
|
const tableRef = useRef(null);
|
|
|
|
const [dataList, setDataList] = useState([]);
|
|
const [resultData, setResultData] = useState([]);
|
|
|
|
useEffect(() => {
|
|
fetchData(START_DATE, END_DATE);
|
|
}, []);
|
|
|
|
// 이용자 지표 데이터
|
|
const fetchData = async (startDate, endDate) => {
|
|
setLoading(true);
|
|
|
|
const startDateToLocal = formatStringDate(startDate);
|
|
const endDateToLocal = formatStringDate(endDate);
|
|
|
|
await userIndexView(token, startDateToLocal, endDateToLocal).then(data => {
|
|
setDataList(data);
|
|
setLoading(false);
|
|
});
|
|
|
|
};
|
|
|
|
// 검색 함수
|
|
const handleSearch = (send_dt, end_dt) => {
|
|
fetchData(send_dt, end_dt);
|
|
};
|
|
|
|
return (
|
|
<AnimatedPageWrapper>
|
|
<DailyDashBoard />
|
|
<UserIndexSearchBar setResultData={setResultData} resultData={resultData} handleSearch={handleSearch} fetchData={fetchData} />
|
|
<TableInfo>
|
|
<ListOption>
|
|
<ExcelDownButton tableRef={tableRef} fileName={t('FILE_INDEX_USER_CONTENT')} />
|
|
</ListOption>
|
|
</TableInfo>
|
|
<IndexTableWrap>
|
|
<TableStyle ref={tableRef}>
|
|
<caption></caption>
|
|
<thead>
|
|
<tr>
|
|
{/*<th width="100">국가</th>*/}
|
|
<th width="120">일자</th>
|
|
<th width="100">NRU</th>
|
|
<th width="100">UGQ(생성)</th>
|
|
<th width="100">DGLC</th>
|
|
<th width="100">DAU</th>
|
|
<th width="100">MCU</th>
|
|
<th width="100">총 Playtime(HR)</th>
|
|
<th width="100">평균 Playtime</th>
|
|
<th width="100">WAU</th>
|
|
<th width="100">MAU</th>
|
|
<th width="100">ServerCount</th>
|
|
<th width="100">DB Read Count</th>
|
|
<th width="100">DB Write Count</th>
|
|
<th width="100">DB Sum</th>
|
|
{/*<th width="200">PU</th>*/}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{dataList &&
|
|
dataList.map((data, index) => (
|
|
<tr key={index}>
|
|
{/*<td rowSpan={data.length}>ALL</td>*/}
|
|
<td>{data.date}</td>
|
|
<td>{data.nru}</td>
|
|
<td>{data.ugqCreate}</td>
|
|
<td>{data.dglc}</td>
|
|
<td>{data.dau}</td>
|
|
<td>{data.mcu}</td>
|
|
<td>{Math.ceil(data.playtime / 3600) || 0}</td>
|
|
<td>{Math.round(((data.playtime / 3600) / data.dau) * 100) / 100 || 0}</td>
|
|
<td>{data.wau}</td>
|
|
<td>{data.mau}</td>
|
|
<td>{data.serverCount}</td>
|
|
<td>{data.readCapacity}</td>
|
|
<td>{data.writeCapacity}</td>
|
|
<td>{data.readCapacity + data.writeCapacity}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</TableStyle>
|
|
</IndexTableWrap>
|
|
</AnimatedPageWrapper>
|
|
);
|
|
};
|
|
|
|
export default UserContent;
|