221106~1107_광고 관리 플랫폼 대행사 센터 제작 49_대시보드 기능 구현 - 대행사 대시보드 2

창고·2022년 11월 8일

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

1. 진행 사항

(1) 요약

대시보드 페이지 구현
chart.js 테스트
대시보드 통계 기능 구현
- 10/01 ~ 10/29 시 1~29일의 일일 전체 소진액 차트 (일 단위)
- 상위 탑 10 광고주 소진액 차트 (기간 합계)
대시보드 차트 데이터 보고서 다운로드 기능 구현

(2) 상세 내용

상위 탑 10 광고주 소진액 차트 관련, 데이터의 길이를 최대 10으로 제한하기 위해 stream()의 limit()를 사용

    // 상위 광고주별 소진액 차트 출력
    @Transactional(readOnly = true)
    public List<DashboardStatisticsDto> setTestDashboard2(LocalDate startDate, LocalDate lastDate) {

        LocalDate defaultLastDate = LocalDate.parse(LocalDate.now().minusDays(1)
                .format(DateTimeFormatter.ofPattern("yyyy-MM-dd")));
        LocalDate startDateBeforeSevenDays = defaultLastDate.minusDays(6);
        LocalDate startDateBeforeThirtyDays = defaultLastDate.minusDays(30);

        if (lastDate == null) {
            lastDate = defaultLastDate;
        }

        if (startDate == null) {
            startDate = startDateBeforeThirtyDays;
        }

        return statisticsQueryRepository.dashboardTestQuery3(startDate, lastDate).stream().limit(10).collect(Collectors.toList());
    }

HTML 내 chart.js의 chart 설정에서 x축 라벨 표시를 최대 10개로 지정하였음

            options: {
              
              ....
              
                scales: {

                  ....
                  
                    x: {
                        grid: {
                            display: false,
                            drawBorder: false,
                            drawTicks: false
                        },
                        ticks: {
                            padding: 10,
                            font: {
                                size: 9
                            },
                            autoSkip: true, // x축 데이터 갯수 제한
                            maxTicksLimit: 10 // x축 데이터 갯수 제한

광고주 - 캠페인 - 소재 - 실적 으로 연결된 상황에서 '전체 소진액' 순으로 광고주를 정렬을 하기 위해 통계 조회하여 리스트를 먼저 받은 뒤, stream()의 sorted()를 사용하여 정렬하였음

    // 광고주별 소진액 차트 출력
    public List<DashboardStatisticsDto> dashboardTestQuery3(@Param("startDate") LocalDate startDate,
                                                            @Param("lastDate") LocalDate lastDate
    ) {
        List<DashboardStatisticsDto> results = jpaQueryFactory
                .select(Projections.fields(DashboardStatisticsDto.class,
                        clientUser.userId.as("clientId"),
                        clientUser.nickname.as("clientName"),
                        performance.spend.sum().as("spend"),
                        category.name.as("category")
                ))
                .from(performance)
                .leftJoin(performance.creative, creative)
                .leftJoin(creative.campaign, campaign)
                .leftJoin(campaign.clientUser, clientUser)
                .leftJoin(clientUser.category, category)
                .where(
                        performance.createdAt.between(startDate, lastDate),
                        creative.deleted.eq(false)
                )
                .groupBy(clientUser.userId)
                .fetch();

        for (DashboardStatisticsDto result : results) {
            Long spend = result.getSpend();

            result.setSpendIndicator(spend);
            result.setStartDateAndLastDate(startDate, lastDate);
        }

        results = results.stream()
                .sorted(Comparator.comparing(DashboardStatisticsDto::getSpend).reversed())
                .collect(Collectors.toList()); // Collections의 comparing을 사용, 내림차순 정렬

        return results;
    }

대시보드 간 이동을 편하게 하기 위해 상단 수평 내비게이션 바 및 드롭다운 메뉴를 추가

      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link disabled">대행사 대시보드</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">그룹-에이전트 대시보드</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="/dashboard/groups">그룹별 소진액</a></li>
            <li><a class="dropdown-item" href="/dashboard/agents">에이전트별 소진액</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">업종별 대시보드</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="/dashboard/category">업종별 소진액</a></li>
            <li><a class="dropdown-item" href="/dashboard/category_clients">업종-광고주별 소진액</a></li>
          </ul>
        </li>
      </ul>