유저 지표 잔존율 생성
This commit is contained in:
@@ -1,108 +1,76 @@
|
||||
import { Fragment, useEffect, useState } from 'react';
|
||||
|
||||
import Button from '../../components/common/button/Button';
|
||||
import React, { Fragment, useRef } from 'react';
|
||||
|
||||
import { TableStyle, TableInfo, ListOption, IndexTableWrap } from '../../styles/Components';
|
||||
import { RetentionSearchBar } from '../../components/IndexManage/index';
|
||||
import { RetentionIndexExport, RetentionIndexView } from '../../apis';
|
||||
import { AnimatedPageWrapper } from '../common/Layout';
|
||||
import { useRetentionSearch, RetentionSearchBar } from '../searchBar';
|
||||
import { TableSkeleton } from '../Skeleton/TableSkeleton';
|
||||
import { numberFormatter } from '../../utils';
|
||||
import { ExcelDownButton } from '../common';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const RetentionContent = () => {
|
||||
const { t } = useTranslation();
|
||||
const tableRef = useRef(null);
|
||||
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(new Date(d.setDate(d.getDate() - 1)).setHours(24, 0, 0, 0));
|
||||
|
||||
const [dataList, setDataList] = useState([]);
|
||||
const [resultData, setResultData] = useState([]);
|
||||
const [retentionData, setRetention] = useState(1);
|
||||
const {
|
||||
searchParams,
|
||||
loading: dataLoading,
|
||||
data: dataList,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
updateSearchParams
|
||||
} = useRetentionSearch(token);
|
||||
|
||||
const [sendDate, setSendDate] = useState(START_DATE);
|
||||
const [finishDate, setFinishDate] = useState(END_DATE);
|
||||
const [excelBtn, setExcelBtn] = useState(true); //true 시 비활성화
|
||||
|
||||
useEffect(() => {
|
||||
fetchData(START_DATE, END_DATE);
|
||||
}, []);
|
||||
|
||||
// Retention 지표 데이터
|
||||
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 RetentionIndexView(token, startDateToLocal, endDateToLocal));
|
||||
|
||||
console.log(dataList);
|
||||
|
||||
setSendDate(startDateToLocal);
|
||||
setFinishDate(endDateToLocal);
|
||||
};
|
||||
|
||||
// 검색 함수
|
||||
const handleSearch = (send_dt, end_dt) => {
|
||||
fetchData(send_dt, end_dt);
|
||||
setRetention(resultData.retention);
|
||||
};
|
||||
|
||||
// 엑셀 다운로드
|
||||
const handleXlsxExport = () => {
|
||||
const fileName = 'Caliverse_Retention_Index.xlsx';
|
||||
|
||||
if(!excelBtn){
|
||||
RetentionIndexExport(token, fileName, sendDate, finishDate);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<RetentionSearchBar setResultData={setResultData} resultData={resultData}
|
||||
handleSearch={handleSearch} fetchData={fetchData} setRetention={setRetention} setExcelBtn={setExcelBtn} />
|
||||
<AnimatedPageWrapper>
|
||||
<RetentionSearchBar
|
||||
searchParams={searchParams}
|
||||
onSearch={(newParams, executeSearch = true) => {
|
||||
if (executeSearch) {
|
||||
handleSearch(newParams);
|
||||
} else {
|
||||
updateSearchParams(newParams);
|
||||
}
|
||||
}}
|
||||
onReset={handleReset}
|
||||
/>
|
||||
<TableInfo>
|
||||
<ListOption>
|
||||
<Button
|
||||
theme={excelBtn === true ? "disable" : "line"}
|
||||
text="엑셀 다운로드"
|
||||
disabled={handleXlsxExport}
|
||||
handleClick={handleXlsxExport} />
|
||||
<ExcelDownButton tableRef={tableRef} fileName={t('FILE_INDEX_USER_RETENTION')} />
|
||||
</ListOption>
|
||||
</TableInfo>
|
||||
<IndexTableWrap>
|
||||
<TableStyle>
|
||||
<caption></caption>
|
||||
<thead>
|
||||
<tr>
|
||||
{/* <th width="100">국가</th> */}
|
||||
<th width="150">일자</th>
|
||||
<th className="cell-nru">NRU</th>
|
||||
{[...Array(Number(retentionData))].map((value, index) => {
|
||||
return <th key={index}>{`D+${index + 1}`}</th>;
|
||||
})}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataList.retention &&
|
||||
dataList.retention.map(data => (
|
||||
<tr className="cell-nru-th" key={data.date}>
|
||||
<td>{data.date}</td>
|
||||
{data['d-day'].map((day, index) => (
|
||||
<td key={index}>{day.dif}</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</TableStyle>
|
||||
</IndexTableWrap>
|
||||
</>
|
||||
{dataLoading ? <TableSkeleton width='100%' count={15} /> :
|
||||
<IndexTableWrap>
|
||||
<TableStyle ref={tableRef}>
|
||||
<caption></caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>일자</th>
|
||||
<th>NRU</th>
|
||||
<th>D+1</th>
|
||||
<th>D+7</th>
|
||||
<th>D+30</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{dataList?.map((data, index) => (
|
||||
<Fragment key={index}>
|
||||
<tr>
|
||||
<td>{data.logDay}</td>
|
||||
<td>{data.totalCreated}</td>
|
||||
<td>{numberFormatter.formatPercent(data.d1_rate)}</td>
|
||||
<td>{numberFormatter.formatPercent(data.d7_rate)}</td>
|
||||
<td>{numberFormatter.formatPercent(data.d30_rate)}</td>
|
||||
</tr>
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</TableStyle>
|
||||
</IndexTableWrap>
|
||||
}
|
||||
</AnimatedPageWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user