Angular2 :: Add Module 3 (그래프)

이전 포스팅에 이어서 하겠습니다

개인프로젝트로 만든 크롤러앱에서 수집한 데이터를 가지고 차트로 표현해보려고합니다.

기준프로젝트 화면  : http://moonna.tistory.com/3

신규등록 을 마치면 위와 같이 목록들이 보인다 

수집한해시태그 맥북 로우 클릭후 데이터를 가져와 차트로 보여줄까합니다

collect.component.html

    <ag-grid-ng2 #agGrid style="width: 100%; height: 200px;" class="ag-fresh"
                 [gridOptions]="gridOptions" (rowClicked)='onRowClicked($event)'
                 >   
    </ag-grid-ng2>

그리드 로우 클릭이벤트를 생성해줍시다 

collect.component.ts

onRowClicked(event: any) { 
 
      this.searchdata = event.data;
      
       var query = {
                        "name" : this.searchdata.name,
                        "searchquery" : this.searchdata.hashtag
       }
       
        var headers = new Headers(); 
        headers.append('Content-Type', 'application/json')
        this.http.post('http://localhost:4100/searchid',query,{headers: headers}).subscribe((res) => {
        this.resultData = res.json();
         
}

로우클릭시 event값을 가져와 변수에집어넣어줍니다 

그후 JSON 형태로 만들어준후 POST 시켜줘서 해당조건과 맞는 데이터를 가져옵니다  

그후 가져온 데이터를 this.resultData 변수에 넣어줍니다 

 var TempResultData = new Array()  //수집된데이타 날짜    배열
 
        for(var i = 0 ; i < this.resultData.length - 1; i ++)
        {
            TempResultData[i] = this.resultData[i]['date'].substring(0,10)
        }
 
         TempResultData.sort(this.sortDate)
 

그후 수집된 데이타 날짜를 가져오는 배열을 하나 선언합니다

중간에 .substring(0,10) 을 해준이유는 저장된 날짜형식이  아래 그림과같이 시분초 까지 저장되어있습니다 

날짜별로 소트를 시킨후  로그를 살펴보면 

엄청많은 데이터가 보이는것을 확인할수가있습니다 

차트의 하단부에 월,일부분만 필요해서 월 일 부분만 따로 추렸습니다  이많은 데이터에서 중복된 데이터를 제거를 한후 

카운트까지해볼 생각입니다 

        //array 중복 제거 
        var uniq = TempResultData.reduce(function(a,b){
            if (a.indexOf(b) < 0 ) a.push(b);
            return a;
        },[]);
 
        this.barChartLabels = uniq

indexof() 를 이용해서 중복값을 처리해주고 필요한  일자를 아래그림과 같이 추렸습니다 

중복된 날짜는 따로 구했으니 중복된값을 카운트 해보도록하겠습니다 

        for(var value in TempResultData) {
 
        var index = TempResultData[value]
        overlapData[index] = overlapData[index] == undefined ? 1 : overlapData[index] += 1
        }   

중복된 날짜를 비교해서 카운팅을 해줍니다

그후에 나온값들을 차트 데이터셋에 입력시켜주면 끝!

this.barChartData = [{data : overlapcount,label:this.resultData[0]['searchquery']}]

실행화면