221109_광고 관리 플랫폼 대행사 센터 제작 51_대시보드 기능 구현 - 업종별 대시보드

창고·2022년 11월 10일
0

해당 게시글은 개인 프로젝트인 "광고 관리 플랫폼 대행사 센터 제작"
#139 "대시보드 기능 구현 - 그룹-에이전트 대시보드" 이슈를 다루고 있습니다

1. 진행 사항

(1) 요약

  • 대시보드 페이지 구현
  • chart.js 테스트
  • Repository 분리
  • 대시보드 통계 기능 구현
    • 업종별 전체 소진액 차트 (기간 합계)
    • 업종별 광고 실적 지표 차트 (기간 합계)
  • 대시보드 차트 데이터 보고서 다운로드 기능 구현

(2) 상세

  • 통계 처리를 담당하는 StatisticsQueryRepository에 너무 많은 기능과 책임이 부여되고 있어 대시보드 통계 처리를 위한 DashboardQueryRepository를 추가, 대시보드 통계 관련 메소드들을 이관하였음
@Repository
public class DashboardQueryRepository {

    private final JPAQueryFactory jpaQueryFactory;

    public DashboardQueryRepository(JPAQueryFactory jpaQueryFactory) {
        this.jpaQueryFactory = jpaQueryFactory;
    }

    public List<DashboardStatisticsDto> dashboardTestQuery(@Param("startDate") LocalDate startDate,
                                                           @Param("lastDate") LocalDate lastDate
    ) {
        List<DashboardStatisticsDto> results = jpaQueryFactory
                .select(Projections.fields(DashboardStatisticsDto.class,
                        performance.spend.sum().as("spend"),
                        performance.createdAt.as("startDate")
                        
                        ....
  • 업종별 레퍼런스는 조회 해야 할 지표의 종류가 많기 때문에 콤보박스로 지표들을 나열하고 해당 지표를 선택할 경우 차트를 업데이트하게끔 구현할 예정
        <select name="performance" style="width: 90px; margin-left: 50px;">
          <option value="view">노출수</option>
          <option value="click">노출수</option>
          <option value="conversion">전환수</option>
          <option value="purchase">구매액</option>
          <option value="spend">소진액</option>
          <option value="CTR" selected>클릭률</option>
          <option value="CVR">전환률</option>
          <option value="CPA">CPA</option>
          <option value="ROAS">ROAS</option>
        </select>
  • 특이사항 : 차트 구현에 사용하는 model 내부의 CTR, ROAS... 등의 대문자로 표기된 값은 javascript에서 사용 시 소문자로 해야 인식을 했다.... 신기하네
    $(document).ready(function () {
        var categoryList = [];
        var performanceList = [];

        var data = /*[[ ${results} ]]*/[];
        for (var i = 0; i < data.length; i++) {
            categoryList.push(data[i].category);
            performanceList.push(data[i].ctr); // CTR로 하면 인식을 못해요...
        }

2. 결과

  • 업종별 소진액 대시보드 (초기 조회 시 조회 시점 하루 전~30일 전까지 조회)
  • 업종별 소진액 보고서 파일
  • 업종별 레퍼런스 대시보드 (초기 조회 시 조회 시점 하루 전~30일 전까지의 클릭률 기본 조회)
  • 업종별 레퍼런스 보고서 파일

3. 미흡한 점 / 개선이 필요한 사항

  • 레퍼런스 차트의 경우 봐야 할 지표가 많기 때문에 일단 콤보박스를 별도로 구현했고 콤보박스에서 선택한 지표에 따라 차트를 업데이트하기로 하였음 -> 이후 이슈인 '캠페인 / 소재 / 실적 차트' 구현 시 추가로 구현해보고 적용 예정
  • 보고서 기능은 다 구현이 되었으니 한꺼번에 보고서별 컬럼 width를 조정해봐야할듯
profile
공부했던 내용들을 모아둔 창고입니다.

0개의 댓글