Angular2 :: Add Module 3 (그래프)

MEAN stack/Angular2 2017. 1. 10. 19:17


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


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


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




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


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




collect.component.html

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


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



collect.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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();
         
}
cs


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


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


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




1
2
3
4
5
6
7
8
9
 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)
 
cs


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


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




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



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


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


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


1
2
3
4
5
6
7
        //array 중복 제거 
        var uniq = TempResultData.reduce(function(a,b){
            if (a.indexOf(b) < 0 ) a.push(b);
            return a;
        },[]);
 
        this.barChartLabels = uniq
cs

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



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


1
2
3
4
5
        for(var value in TempResultData) {
 
        var index = TempResultData[value]
        overlapData[index] = overlapData[index] == undefined ? 1 : overlapData[index] += 1
        }   
cs



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


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


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


실행화면 




'MEAN stack > Angular2' 카테고리의 다른 글

Angular2 :: 'unsafe value' exception  (0) 2017.02.01
Angular2 :: Jquery 사용법  (0) 2017.01.24
Angular2 :: Add Module 2 (모듈 추가)  (0) 2017.01.10
Angular2 :: Add Module 1 (모듈 추가)  (0) 2017.01.10
Angular2 :: Template Syntax(템플릿)  (1) 2016.12.17
WRITTEN BY
내가달이다
,

Angular2 :: Add Module 2 (모듈 추가)

MEAN stack/Angular2 2017. 1. 10. 02:18

셋팅이 완료 되었다 가정하고 진행합니다


여러개의 차트가 있는데 그중에 가장 많이 쓰이는 bar형식의 차트를 이용해버려합니다 


testsample1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
  <button (click)="randomize()">Update</button>
</div>
cs


testsample1.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
   public barChartOptions:any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  //하단 라벨
  public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  //바 타입
  public barChartType:string = 'bar';
  public barChartLegend:boolean = true;
 
  public barChartData:any[] = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
  ];
 
  // events
  public chartClicked(e:any):void {
    console.log(e);
  }
 
  public chartHovered(e:any):void {
    console.log(e);
  }
 
cs


오픈소스에 제공하는 간단한 데모를 적용시켜본것입니다


datasets , labels,options 등을 ts 에서 값들을 입력해줍니다 


실행해보겠습니다




다음 포스팅에는 크롤링한데이터를 적용해볼예정입니다 


'MEAN stack > Angular2' 카테고리의 다른 글

Angular2 :: Jquery 사용법  (0) 2017.01.24
Angular2 :: Add Module 3 (그래프)  (0) 2017.01.10
Angular2 :: Add Module 1 (모듈 추가)  (0) 2017.01.10
Angular2 :: Template Syntax(템플릿)  (1) 2016.12.17
Angular2 :: User Input (유저 입력)  (0) 2016.12.08
WRITTEN BY
내가달이다
,

Angular2 :: Add Module 1 (모듈 추가)

MEAN stack/Angular2 2017. 1. 10. 02:06

최근 크롤러웹페이지를 만든후 크롤링한데이터를 웹상에 차트상으로 표현을 해주고싶어서 


무료이면서 가벼운 모듈을 찾다가 


ng2-charts 가 괜찮아보여서 사용하려합니다  http://valor-software.com/ng2-charts/ 


github 오픈소스 공개되어있으니 데모를 보고 알맞게 적용하시면될거같습니다 



1. ng2-chart 를  npm을 이용해 설치합니다  


1
npm install ng2-charts --save
cs

2. chart.js 가 필요하니 이것도 설치해줍시다  이부분이 셋팅이 잘안되있을시 

1
npm install chart.js --save
cs



다음과 같이 오류가발생할수 있는데 이같은경우는 경로를 제대로 잡아주면 해결됩니다 .



이런식으로 나오면 설치완료!


3. 중요한부분인데 chart.js 을 포함시켜줘야됩니다 


index.html

1
<script src="node_modules/chart.js/src/chart.js"></script>
cs




설치 끝!


ps. 혹여나 저처럼 system.js 사용하시는분을 위해 추가로 남겨요


이것때문에 삽질좀했습니다 ..



systemjs.config.js


map 구문 안에 추가

1
"ng2-charts": "node_modules/ng2-charts",
cs



package 구문 안에 추가 


1
 "ng2-charts": { main: 'ng2-charts.js' }
cs


여기까지 하셨으면 셋팅은 끝나신겁니다


다음 포스팅에 간단하게 적용된 데모를 포스팅할예정입니다 

'MEAN stack > Angular2' 카테고리의 다른 글

Angular2 :: Jquery 사용법  (0) 2017.01.24
Angular2 :: Add Module 3 (그래프)  (0) 2017.01.10
Angular2 :: Add Module 2 (모듈 추가)  (0) 2017.01.10
Angular2 :: Template Syntax(템플릿)  (1) 2016.12.17
Angular2 :: User Input (유저 입력)  (0) 2016.12.08
WRITTEN BY
내가달이다
,

유튜브,트위터 크롤러 :: 배열 데이터 순서 랜덤

MEAN stack/SNS Crawler App 2017. 1. 8. 02:20

유튜브 , 트위터 API 를 이용해 검색한 데이터를 한곳에 모아 보는 웹페이지를 제작하려했다


그런데 유튜브, 트위터 각각 api 에서 가져오다보니 이 두 데이터를 한 배열에 모아서 보여주려고 하니 어찌할까 하다가 


랜덤 배열을 이용해 볼까 한다 .. 


우선 랜덤 배열 http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array 



1
2
3
4
5
6
7
8
9
10
11
12
              this.SumArrayData[0] = new Array();
                  for(var i =0; i<5; i++)
                  {
                    this.SumArrayData[0][i] = this.tweetsArray[i];
                  }
                  for(var i=0; this.YoutubeArray.length>i; i++)
                  {  
                    this.SumArrayData[0][this.SumArrayData[0].length]= this.YoutubeArray[i];
                  }
                  this.SumArrayData[0].sort(function(){return 0.5-Math.random()});
                  this.loading = false 
                }); 
cs



사이클은 이렇다


for문 만큼 SumArrayData[0][i] 에 트위터데이터 값을 넣어준다 


i를 5로 정한이유는 화면상에 트위터5개만보여주려고하기때문..


그 후 


for 문에서 sumArrayData[0].length 값에 유튜브 값을 넣어준다


앞에 0~4 까지 는 트위터데이터 값이고 5번부터 유튜브 데이터 값을 넣어준것이다 


this.SumArrayData[0].sort(function(){return 0.5-math.random()}); // 랜덤 함수



완성된 페이지는 랜덤으로 섞인다 




'MEAN stack > SNS Crawler App' 카테고리의 다른 글

인스타그램,트위터 크롤러 :: 인스타그램 selector 수정  (3) 2017.07.12
spookyJS :: 오류(1) tiny-jsonrpc  (0) 2017.01.27
CasperJs :: 자주 사용되는 함수  (0) 2016.12.07
인스타그램,트위터 크롤러 :: 4 Nschedule  (8) 2016.12.01
인스타그램,트위터 크롤러 :: 3 Nodejs  (0) 2016.12.01
WRITTEN BY
내가달이다
,

JavaScript :: callbackhell(콜백헬)

ASP.NET MVC/JavaScript 2017. 1. 7. 20:00

콜백헬 에 대해 포스팅해보려고한다


비동기 프로그래밍을 짜본적이없어서 초반에 코딩을할때 고민을 많이 했다 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function  func1 (
    function func2 (
        function func3 (
            function func4 (
                function func5 () {
                alert('func5()');                    
                }
            alert('func4()');    
            }
            alert('func3()');                
        }
        alert('func2()');
    }    
    alert('func1()');    
    
cs



예를 들어보자 개발을 하다보면 이런 콜백 을 자주 볼수있는데 .. 


문제는 돌아간다..돌아가긴하는데...  이걸본 다른 개발자나 인수자들은.....





이럴 경우에는 async 프레임워크 , promise 를 사용하는 방법이있다  저의 경우에는 async 프레임워크를


이용해서 해결했습니다



Waterfall



async 프레임워크에는 여러개 의 제어 흐름이 있는데 자세한것은 https://caolan.github.io/async/  공식 깃헙입니다


저는 waterfall 방식을 이용해서 코드를 깔끔하게 정리했습니다




구현 하려는 코드가 


twitter rest api 를 이용해 데이터를 가져오게되면 한페이지에 100개의 데이터를 가져올수밖에없다 대신에 포함된데이터에 


next_results 값을 포함시켜서 다음 에 찾게되는 값의 주소를 나타낸다.



이값을 이용해 내가원하는 수만큼 가져오고싶엇다 



Waterfall 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
              async.waterfall([
  
                                             
                                            },
                                            function(callback){                                                                                                                                                                                                               
                                                 console.log("next_result 1")
                                                 console.log("scheduleId 1")
                                                functions.ScheduleFeatch(scheduleId);
                                                  setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            },
                                            function(scheduleId,callback){
                                                 console.log("next_result 2")
                                                 console.log("scheduleId 2")
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                            ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 3")
                                                 console.log("scheduleId 3")
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                            ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 4")
                                                console.log("scheduleId 4")
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                             ,
                                            function(scheduleId,callback){
                                                 console.log("next_result 5")
                                                console.log("scheduleId 5")
                         
                                                 functions.ScheduleFeatch(scheduleId);
                                                setTimeout(function() {
                                                callback(null,config.schedule.since_id)
                                            }, 3000);
                                            }
                                           
                                            ]
                                        );
 
cs


'ASP.NET MVC > JavaScript' 카테고리의 다른 글

JavaScript :: 한글만 추출하는 정규식  (0) 2017.03.09
JavaScript :: array 특정요소 삭제  (0) 2017.02.08
JavaScript :: async.forEachOf  (0) 2017.02.01
JavaScript :: mouseover (마우스오버)  (0) 2017.01.13
JavaScript ::GetDate (날짜)  (0) 2017.01.06
WRITTEN BY
내가달이다
,

JavaScript ::GetDate (날짜)

ASP.NET MVC/JavaScript 2017. 1. 6. 17:49

요 몇일 연말이다 새해다 해서 공부가 뜸해졌다 반성을 많이 하고있습니다 .. ㅜㅜ 


크롤러앱요새 잘 사용되어지다가 새해 들어와서 갑자기 데이터가 다날라 가고 수집을 못하는 에러가 발생한 것이다 


왜그럴까 좀 뒤져다 보니 ...


아이고  1월,2월 받아오는 부분에서 +1 을 안해줘서 이포스팅을 작성하게 되엇다 




var nowDate = new Date();


nowDate.getFullYear() : 년도 YYYY 형식
nowDate.getMonth() : 배열처럼 0부터 시작 1월은 0, 2월은 1 .. 숫자로 월 표기하고 싶다면 +1
nowDate.getDate : 일 dd 형식



컬러 스크립트가 갑자기 안되서 우선올립니다.. 추후 수정하도록 하겠습니다 

'ASP.NET MVC > JavaScript' 카테고리의 다른 글

JavaScript :: 한글만 추출하는 정규식  (0) 2017.03.09
JavaScript :: array 특정요소 삭제  (0) 2017.02.08
JavaScript :: async.forEachOf  (0) 2017.02.01
JavaScript :: mouseover (마우스오버)  (0) 2017.01.13
JavaScript :: callbackhell(콜백헬)  (0) 2017.01.07
WRITTEN BY
내가달이다
,