대시보드 사용자 접속현황 그래프 월별차트보기 추가
parent
5cd1c3148d
commit
d05a5864c4
|
|
@ -216,10 +216,14 @@ function EgovAdminScheduleList(props) {
|
|||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [scheduleList]);
|
||||
|
||||
const [isDailyChart, setChart] = useState(true);
|
||||
|
||||
const getDailyUserLogList = useCallback(() => {
|
||||
console.groupCollapsed("EgovAdminScheduleList.getDailyUserLogList()");
|
||||
|
||||
const dailyUserLogListURL = '/admin/dashboard/daily-user-log-list';
|
||||
console.log("@@@ isDailyChart : " + isDailyChart);
|
||||
|
||||
const dailyUserLogListURL = isDailyChart ? '/admin/dashboard/daily-user-log-list' : '/admin/dashboard/monthly-user-log-list';
|
||||
|
||||
const requestOptions = {
|
||||
method: "GET",
|
||||
|
|
@ -239,12 +243,29 @@ function EgovAdminScheduleList(props) {
|
|||
}
|
||||
);
|
||||
console.groupEnd("EgovAdminScheduleList.getDailyUserLogList()");
|
||||
}, []);
|
||||
}, [isDailyChart]);
|
||||
|
||||
useEffect(() => {
|
||||
getDailyUserLogList();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
}, [isDailyChart]);
|
||||
|
||||
const handleChartToggle = () => {
|
||||
setChart(!isDailyChart);
|
||||
};
|
||||
|
||||
const ChartToggle = ({onToggle}) => {
|
||||
|
||||
const handleToggle = () => {
|
||||
onToggle(!isDailyChart);
|
||||
};
|
||||
|
||||
return (
|
||||
<button onClick={handleToggle}>
|
||||
{isDailyChart ? '월별차트보기' : '일별차트보기'}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
const data = dailyUserLogList.map(item => ({
|
||||
logDt: item.logDt,
|
||||
|
|
@ -253,35 +274,12 @@ function EgovAdminScheduleList(props) {
|
|||
amt: item.pcCnt,
|
||||
}));
|
||||
|
||||
const getIntroOfPage = (label) => {
|
||||
if (label === 'Page A') {
|
||||
return "Page A is about men's clothing";
|
||||
}
|
||||
if (label === 'Page B') {
|
||||
return "Page B is about women's dress";
|
||||
}
|
||||
if (label === 'Page C') {
|
||||
return "Page C is about women's bag";
|
||||
}
|
||||
if (label === 'Page D') {
|
||||
return 'Page D is about household goods';
|
||||
}
|
||||
if (label === 'Page E') {
|
||||
return 'Page E is about food';
|
||||
}
|
||||
if (label === 'Page F') {
|
||||
return 'Page F is about baby food';
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
const CustomTooltip = ({active, payload, label}) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div className="custom-tooltip">
|
||||
<p className="desc">사용자 접속 현황</p>
|
||||
<p className="label">{`${label} : ${payload[0].value}`}</p>
|
||||
<p className="intro">{getIntroOfPage(label)}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -289,7 +287,7 @@ function EgovAdminScheduleList(props) {
|
|||
return null;
|
||||
};
|
||||
|
||||
class Example extends PureComponent {
|
||||
class UserLogChart extends PureComponent {
|
||||
static demoUrl = 'https://codesandbox.io/s/tooltip-with-customized-content-lyxvs';
|
||||
|
||||
render() {
|
||||
|
|
@ -341,8 +339,10 @@ function EgovAdminScheduleList(props) {
|
|||
|
||||
<h2 className="tit_2">일정관리</h2>
|
||||
|
||||
<ChartToggle isDailyChart={isDailyChart} onToggle={handleChartToggle}/>
|
||||
|
||||
<div style={{width: 1000, height: 300}}>
|
||||
<Example/>
|
||||
<UserLogChart/>
|
||||
</div>
|
||||
|
||||
{/* <!-- 검색조건 --> */}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
package com.dbnt.kcscbackend.admin.dashboard;
|
||||
|
||||
import com.dbnt.kcscbackend.admin.dashboard.dto.MonthlyUserLogDTO;
|
||||
import com.dbnt.kcscbackend.admin.dashboard.service.AdminDashboardService;
|
||||
import com.dbnt.kcscbackend.config.common.BaseController;
|
||||
import com.dbnt.kcscbackend.config.common.ResultVO;
|
||||
|
|
@ -13,9 +14,12 @@ import org.springframework.web.bind.annotation.RequestMapping;
|
|||
import org.springframework.web.bind.annotation.RequestMethod;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
|
||||
import java.math.BigInteger;
|
||||
import java.time.LocalDate;
|
||||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.stream.Collectors;
|
||||
|
||||
@RestController
|
||||
@RequiredArgsConstructor
|
||||
|
|
@ -26,9 +30,9 @@ public class AdminDashboardController extends BaseController {
|
|||
private final AdminDashboardService adminDashboardService;
|
||||
|
||||
@Operation(
|
||||
summary = "기본코드 그룹 조회",
|
||||
description = "기본코드 그룹 조회",
|
||||
tags = {"AdminConfigController"}
|
||||
summary = "일별 사용자 현황 차트 조회",
|
||||
description = "일별 사용자 현황 차트 조회",
|
||||
tags = {"AdminDashboardController"}
|
||||
)
|
||||
@ApiResponses(value = {
|
||||
@ApiResponse(responseCode = "200", description = "조회 성공"),
|
||||
|
|
@ -42,9 +46,6 @@ public class AdminDashboardController extends BaseController {
|
|||
// 현재 날짜
|
||||
// todo endDate 뒤에 .minus 지워야함
|
||||
LocalDate endDate = LocalDate.now().minusMonths(6);
|
||||
|
||||
System.out.println("@@@ localdate : " + endDate);
|
||||
|
||||
// 3개월 전 날짜 계산
|
||||
LocalDate startDate = endDate.minusMonths(3);
|
||||
|
||||
|
|
@ -52,4 +53,34 @@ public class AdminDashboardController extends BaseController {
|
|||
resultVO.setResult(resultMap);
|
||||
return resultVO;
|
||||
}
|
||||
|
||||
@Operation(
|
||||
summary = "월별 사용자 현황 차트 조회",
|
||||
description = "월별 사용자 현황 차트 조회",
|
||||
tags = {"AdminDashboardController"}
|
||||
)
|
||||
@ApiResponses(value = {
|
||||
@ApiResponse(responseCode = "200", description = "조회 성공"),
|
||||
@ApiResponse(responseCode = "403", description = "인가된 사용자가 아님")
|
||||
})
|
||||
@RequestMapping(method = RequestMethod.GET, value = "/monthly-user-log-list", consumes = MediaType.APPLICATION_JSON_VALUE)
|
||||
public ResultVO getMonthlyUserLogList() throws Exception {
|
||||
ResultVO resultVO = new ResultVO();
|
||||
Map<String, Object> resultMap = new HashMap<>();
|
||||
|
||||
// 현재 날짜
|
||||
// todo endDate 뒤에 .minus 지워야함
|
||||
LocalDate endDate = LocalDate.now().minusMonths(6);
|
||||
// 3개월 전 날짜 계산
|
||||
LocalDate startDate = endDate.minusMonths(3);
|
||||
|
||||
List<Object[]> result = adminDashboardService.selectMonthlyUserLogList(startDate, endDate);
|
||||
List<MonthlyUserLogDTO> monthlyUserLogDTOList = result.stream()
|
||||
.map(row -> new MonthlyUserLogDTO((String) row[0], (BigInteger) row[1]))
|
||||
.collect(Collectors.toList());
|
||||
|
||||
resultMap.put("dailyUserLogList", monthlyUserLogDTOList);
|
||||
resultVO.setResult(resultMap);
|
||||
return resultVO;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
package com.dbnt.kcscbackend.admin.dashboard.dto;
|
||||
|
||||
import com.dbnt.kcscbackend.admin.dashboard.entity.TnDailyUserLog;
|
||||
import lombok.AllArgsConstructor;
|
||||
import lombok.Data;
|
||||
import lombok.ToString;
|
||||
|
||||
import java.math.BigInteger;
|
||||
import java.time.LocalDate;
|
||||
|
||||
@Data
|
||||
@AllArgsConstructor
|
||||
@ToString
|
||||
public class MonthlyUserLogDTO {
|
||||
private String logDt;
|
||||
private BigInteger logCnt;
|
||||
|
||||
public MonthlyUserLogDTO(Object[] row) {
|
||||
this.logDt = (String) row[0];
|
||||
this.logCnt = (BigInteger) row[1];
|
||||
}
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@ import org.hibernate.annotations.DynamicInsert;
|
|||
import org.hibernate.annotations.DynamicUpdate;
|
||||
|
||||
import javax.persistence.*;
|
||||
import java.math.BigInteger;
|
||||
import java.time.LocalDate;
|
||||
|
||||
@Getter
|
||||
|
|
@ -33,4 +34,6 @@ public class TnDailyUserLog {
|
|||
|
||||
@Column(name = "pc_cnt")
|
||||
private Integer pcCnt;
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -2,10 +2,21 @@ package com.dbnt.kcscbackend.admin.dashboard.repository;
|
|||
|
||||
import com.dbnt.kcscbackend.admin.dashboard.entity.TnDailyUserLog;
|
||||
import org.springframework.data.jpa.repository.JpaRepository;
|
||||
import org.springframework.data.jpa.repository.Query;
|
||||
import org.springframework.data.repository.query.Param;
|
||||
|
||||
import java.time.LocalDate;
|
||||
import java.util.List;
|
||||
|
||||
public interface TnDailyUserLogRepository extends JpaRepository<TnDailyUserLog, Long> {
|
||||
List<TnDailyUserLog> findByLogDtBetweenOrderByLogDt(LocalDate startDate, LocalDate endDate);
|
||||
|
||||
@Query(value = "SELECT TO_CHAR(log_dt, 'YYYYMM') as log_dt, "
|
||||
+ "SUM(log_cnt) as log_cnt "
|
||||
+ "FROM tn_daily_user_log "
|
||||
+ "WHERE log_dt BETWEEN :startDate AND :endDate "
|
||||
+ "GROUP BY TO_CHAR(log_dt, 'YYYYMM') "
|
||||
+ "ORDER BY log_dt", nativeQuery = true)
|
||||
List<Object[]> selectMonthlyUserLogStatistics(@Param("startDate") LocalDate startDate, @Param("endDate") LocalDate endDate);
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,4 +17,8 @@ public class AdminDashboardService extends EgovAbstractServiceImpl {
|
|||
public List<TnDailyUserLog> selectDailyUserLogList(LocalDate startDate, LocalDate endDate) {
|
||||
return tnDailyUserLogRepository.findByLogDtBetweenOrderByLogDt(startDate, endDate);
|
||||
}
|
||||
|
||||
public List<Object[]> selectMonthlyUserLogList(LocalDate startDate, LocalDate endDate) {
|
||||
return tnDailyUserLogRepository.selectMonthlyUserLogStatistics(startDate, endDate);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue