221110_광고 관리 플랫폼 대행사 센터 제작 52_캠페인/소재/소재 실적 차트 구현 외

해당 게시글은 개인 프로젝트인 "광고 관리 플랫폼 대행사 센터 제작" 중
#145 "업종별 레퍼런스 차트 지표 선택 및 조회 기능 추가", #138 캠페인 / 소재 / 소재 실적 차트 추가" 이슈를 다루고 있습니다

1. 진행 사항

(1) 요약

• 업종별 레퍼런스 차트 지표 선택 및 조회 기능 추가
• 광고 관리 페이지 내 차트 추가
  • 캠페인 차트 (캠페인 및 기간별 정렬)
  • 소재 차트 (소재 및 기간별 정렬)
  • 실적 차트 (기간별 정렬)
• '구매액' -> '전환매출' 로 변경

(2) 상세 내용

• 광고 관리 페이지 내 차트를 구현하기 전에 업종별 레퍼런스 차트 지표 선택 및 조회 기능을 구현하였음
• 차트 생성 jquery를 수정하였음

    /*<![CDATA[*/
    var ctx = document.getElementById('myChart').getContext('2d');
    var dayList = [];
    var performanceList = [];
    var data = /*[[ ${chart} ]]*/[];
    var config = {
        type: 'line',
        data: {
            labels: dayList,
            datasets: [{
                fill: false,
                data: performanceList,
                backgroundColor: [
                    'rgb(95,192,153)',
                ],
                borderColor: [
                    'rgba(125,134,173,1)',
                ],
                borderWidth: 1,
                barPercentage: 0.5
            }]
        },
        options: {
            plugins: {
                legend: {
                    display: false
                },
            },
            scales: {
                y: {
                    grid: {
                        drawOnChartArea: true,  //선 지우기
                        drawTicks: false,   //축의 숫자 옆 눈금 지우기
                        drawBorder: true,
                        borderDash: [3, 3]	//y축 선 실선으로 길이 3,간격 3으로
                    },
                    ticks: {
                        padding: 10,
                        beginAtZero: true
                    }
                },
                x: {
                    grid: {
                        display: false,
                        drawBorder: false,
                        drawTicks: false
                    },
                    ticks: {
                        font: {
                            size: 9
                        },
                        padding: 10
                    }
                }
            }
        }
    };

    // 차트 그리기

    var myChart = new Chart(ctx, config);

    // 초기 페이지 조회 시 작동
    $(document).ready(function () {

        var data = /*[[ ${chart} ]]*/[];
        for (var i = 0; i < data.length; i++) {
            dayList.push(data[i].startDate);
            performanceList.push(data[i].spend);
        }

        myChart.update();

    });

• 콤보 박스 내의 선택된 value를 감지, value의 값에 따라 데이터셋을 재생성하여 기존 데이터셋을 삭제, 신규 데이터셋을 주입하고 Update

   $(function () {

        $('#performance').on('change', function () { // 변경 감지

            config.data.datasets.splice(0,1); // 기존 데이터셋 삭제

            var data = /*[[ ${chart} ]]*/[];
            var newPerformanceList = [];
            var value = this.value;

            if (value == 'view') {
                for (var i = 0; i < data.length; i++) {
                    newPerformanceList.push(data[i].view);
                }
            } else if (value == 'click') {
                for (var i = 0; i < data.length; i++) {
                    newPerformanceList.push(data[i].click);
                }
            } else if (value == 'conversion') {
                for (var i = 0; i < data.length; i++) {
                    newPerformanceList.push(data[i].conversion);
                }
            } else if (value == 'purchase') {
                for (var i = 0; i < data.length; i++) {
                    newPerformanceList.push(data[i].purchase);
                }
            } else if (value == 'spend') {
                for (var i = 0; i < data.length; i++) {
                    newPerformanceList.push(data[i].spend);
                }
            } else if (value == 'CTR') {
                for (var i = 0; i < data.length; i++) {
                    newPerformanceList.push(data[i].ctr);
                }
            } else if (value == 'CVR') {
                for (var i = 0; i < data.length; i++) {
                    newPerformanceList.push(data[i].cvr);
                }
            } else if (value == 'CPA') {
                for (var i = 0; i < data.length; i++) {
                    newPerformanceList.push(data[i].cpa);
                }
            } else if (value == 'ROAS') {
                for (var i = 0; i < data.length; i++) {
                    newPerformanceList.push(data[i].roas);
                }
            }

            var newDataSet = {
                fill: false,
                data: newPerformanceList,
                backgroundColor: [
                    'rgb(95,192,153)',
                ],
                borderColor: [
                    'rgba(125,134,173,1)',
                ],
                borderWidth: 1,
                barPercentage: 0.5
            }

            config.data.datasets.push(newDataSet); // 새 데이터셋 주입

            myChart.update();
        });

    });

• '구매액' 이라는 단어가 모호한 감이 있어 '전환매출' 로 변경

2. 결과

• 업종별 레퍼런스 차트 기본
  
• 업종별 레퍼런스 차트 조회 지표 변경 (노출수 -> 소진액)
  
• 광고 관리 - 캠페인 실적 차트 기본
  
• 광고 관리 - 캠페인 실적 차트 조회 지표 변경 (노출수 -> ROAS)
  
• 기간 조회도 정상 작동
  

3. 미흡한 점 및 개선이 필요한 점

• '최근 7일' '최근 30일' 의 경우 차트에는 영향을 주지 않고 있는데 이는 date 값을 던지지 않고 자체적으로 조회를 하고 있어서 그렇다
  • jquery를 통해 버튼 클릭 이벤트를 잡아서 date에 강제로 값을 줘야할 듯 하다
• 본래 네이버 GFA의 차트처럼 조회 데이터를 2종류로 해서 동시 비교가 하게끔 하려 했으나 dataset을 동적으로 교체하는 기능을 구현하는 것에 실패해서 일단 1종류만 조회하게끔 했다... 추후 구현해보도록 하자