SpreadJS가 포함된 JavaScript로 표시된 현재 COVID-19 데이터 > 블로그 & Tips

본문 바로가기

SpreadJS

블로그 & Tips

SpreadJS가 포함된 JavaScript로 표시된 현재 COVID-19 데이터

페이지 정보

작성자 GrapeCity 작성일 21-04-09 09:48 조회 288회 댓글 0건

본문

당사의 JavaScript 스프레드시트인 SpreadJS는 강력한 계산 엔진, 사용하기 쉬운 템플릿 빌더, URL을 통해 데이터에 쉽게 연결하는 방법을 제공하고 지원합니다. 이 자습서에서는 URL의 가져온 데이터를, SpreadJS의 디자이너를 사용해 만든 대시보드 템플릿에 시각적으로 표시함으로써 활용하는 방법을 설명합니다.


이를 위해서는 URL 데이터를 디자이너에서 만든 템플릿에 대한 셀 바인딩 데이터 소스로 사용해야 합니다. 이 자습서에서는 COVID-19 Tracking Project의 데이터 API를 사용해 SpreadJS 인스턴스에서 데이터 끝점을 표시하고 사용합니다.


표시되는 모든 데이터는 COVID-19 Tracking Project가 제공하고 유지 관리합니다.


런타임 디자이너


수행 단계:

  1. 대시보드 템플릿을 만들어 적용

  2. 콤보 상자 셀 유형 만들기

  3. URL 데이터를 셀 바인딩 데이터 소스로 설정



1단계: 대시보드 템플릿을 만들어 적용


이 섹션에서는 SpreadJS를 사용해 템플릿을 만들고 페이지가 로드될 때 URL 데이터를 템플릿의 데이터 소스로 설정하는 방식으로 URL 데이터를 사용해 템플릿을 채웁니다.


SpreadJS는 SpreadJS의 런타임 디자이너 및 온라인 디자이너를 제공합니다. 디자이너는 나중에 셀 바인딩을 사용해 데이터를 채울 수 있는 템플릿 빌더 옵션을 제공합니다. 템플릿 빌더는 데이터 에 있습니다.


템플릿 빌더


AutoGenerateLabel 옵션을 사용해 바인딩 경로 레이블을 자동으로 만듭니다. 이 데모를 위해 다음 항목을 추가하십시오.

  • state

  • dataQualityGrade

  • positiveIncrease 및 negativeIncrease

  • pending

  • hospitalizedCurrently

  • inIcuCurrently

  • onVentilatorCurrently

  • death

  • recovered

  • totalTestResults


셀을 선택하고 생성된 노드를 두 번 클릭하거나 노드를 끌어서 원하는 영역에 놓을 수 있습니다. 그런 다음, 셀이 병합될 때 데이터가 표시되었으면 하는 방식으로 셀을 디자인할 수 있습니다.

병합된 셀


디자이너를 사용할 때 차트, 스파크라인, 셰이프 및 모든 스타일 지정 형식을 사용할 수도 있습니다. 이 데모의 목적상 템플릿을 이러한 방식으로 디자인하였습니다.

차트 스파크라인 셰이프


디자이너를 사용해 템플릿에 적용할 수 있는 SpreadJS의 또 다른 기능은 하이퍼링크입니다. 이 예시에서는 COVID Tracking Project의 메인 사이트로 연결되는 하이퍼링크를 오른쪽 아래에 있는 셀에 추가하겠습니다. 이 예시에 사용할 URL은 https://covidtracking.com/입니다.


이 하이퍼링크를 추가하려면 다음과 같이 셀을 선택하고 링크를 마우스 오른쪽 버튼으로 클릭하여 선택한 다음, 링크를 붙여넣으십시오.

하이퍼링크


대시보드 템플릿을 다 만들었으면 인스턴스를 JavaScript 파일로 내보냅니다. 아래는 디자이너로 이 작업을 수행하는 방법을 보여주는 gif 이미지입니다. 여기서는 JavaScript 파일의 이름을 *template*으로 지정했습니다.

템플릿 내보내기


다음은 이 예시를 위해 만든 대시보드 템플릿을 다운로드할 수 있는 링크입니다.



JSON 대시보드에서 템플릿을 가져오고 인스턴스를 새로 고침하기


최종 단계: 프로젝트에 template.js 파일을 포함한 후 SpreadJS의 fromJSONrefresh 메서드를 사용해 대시보드 템플릿에서 SpreadJS를 로드한 다음, 인스턴스를 새로 고칩니다.


다음과 같이 HTML 태그에 탬플릿 JSON 파일인 template.js를 포함합니다.

1.1 - Include the template javascript file exported from the runtime designer  
<script src="template.js" type="text/javascript"></script></td>


그런 다음, fromJSONrefresh 메서드를 사용해 템플릿에서 SpreadJS 인스턴스를 로드합니다. 다음 코드 조각은 이 작업을 1.2 표식과 함께 보여줍니다.

        var spread = new GC.Spread.Sheets.Workbook(  
          document.getElementById("ss")  
        );  
        var spreadNS = GC.Spread.Sheets;  
      // 1.2 - Load SpreadJS from the template created with runtime designer  
          spread.fromJSON(template);  
          spread.options.showHorizontalScrollbar = false;  
          spread.options.showVerticalScrollbar = false;  
          spread.options.tabStripVisible = false;
​
      // 1.2 - Refresh the spread instance  
        spread.refresh();
​
        var sheet = spread.getActiveSheet();  
            sheet.options.colHeaderVisible = false;  
            sheet.options.rowHeaderVisible = false;


2단계: ComboBox 셀 유형 만들기

드롭다운 ComboBox 셀 유형을 만들어 최종 사용자가 정보를 보고자 하는 상태를 선택합니다. 콤보 상자를 만든 후 셀 유형 및 기본값을 다음과 같이 B1 (0,1)로 설정합니다.

// 2.1 - Create combo box cell type for state selection  
        var combo = new spreadNS.CellTypes.ComboBox();  
            combo  
            .items([  
            { text: "Select a State", value: "" },  
            { text: "AL", value: "AL" },  
            { text: "AK", value: "AK" },  
            { text: "AZ", value: "AZ" },  
            { text: "AR", value: "AR" },  
            { text: "CA", value: "CA" },  
            { text: "CO", value: "CO" },  
            { text: "CT", value: "CT" },  
            { text: "DE", value: "DE" },  
            { text: "DC", value: "DC" },  
            { text: "FL", value: "FL" },  
            { text: "GA", value: "GA" },  
            { text: "HI", value: "HI" },  
            { text: "ID", value: "ID" },  
            { text: "IL", value: "IL" },  
            { text: "IN", value: "IN" },  
            { text: "IA", value: "IA" },  
            { text: "KS", value: "KS" },  
            { text: "KY", value: "KY" },  
            { text: "LA", value: "LA" },  
            { text: "ME", value: "ME" },  
            { text: "MD", value: "MD" },  
            { text: "MA", value: "MA" },  
            { text: "MI", value: "MI" },  
            { text: "MN", value: "MN" },  
            { text: "MS", value: "MS" },  
            { text: "MO", value: "MO" },  
            { text: "MT", value: "MT" },  
            { text: "NE", value: "NE" },  
            { text: "NV", value: "NV" },  
            { text: "NH", value: "NH" },  
            { text: "NJ", value: "NJ" },  
            { text: "NM", value: "NM" },  
            { text: "NY", value: "NY" },  
            { text: "NC", value: "NC" },  
            { text: "ND", value: "ND" },  
            { text: "OH", value: "OH" },  
            { text: "OK", value: "OK" },  
            { text: "OR", value: "OR" },  
            { text: "PA", value: "PA" },  
            { text: "RI", value: "RI" },  
            { text: "SC", value: "SC" },  
            { text: "SD", value: "SD" },  
            { text: "TN", value: "TN" },  
            { text: "TX", value: "TX" },  
            { text: "UT", value: "UT" },  
            { text: "VT", value: "VT" },  
            { text: "VA", value: "VA" },  
            { text: "WA", value: "WA" },  
            { text: "WV", value: "WV" },  
            { text: "WI", value: "WI" },  
            { text: "WY", value: "WY" },  
          ])  
            .editorValueType(spreadNS.CellTypes.EditorValueType.text);  
        // 2.1 - Set the default value of select a state  
            sheet  
            .getCell(0, 1, spreadNS.SheetArea.viewport)  
            .cellType(combo)  
            .value("Select a State");</td>


3단계: URL 데이터를 셀 바인딩 데이터 소스로 설정

이제 B1 셀에 combobox 셀 유형이 적용된 것을 볼 수 있습니다. 그다음에는 사용자가 콤보 상자에서 항목을 선택할 때 사용자 정의 함수를 만듭니다.


3.1 CellChanged 이벤트에 인스턴스 바인딩하기

먼저 콤보 상자 셀 유형 변경 시 반환된 값을 사용해 최종 사용자가 선택한 상태를 파악해야 합니다. 이를 위해서는 먼저 CellChanged 이벤트를 다음과 같이 SpreadJS 인스턴스에 바인딩해야 합니다.

// 3.1 - Bind the CellChanged event to trigger when a new item is selected from the from comboBox  
        spread.bind(GC.Spread.Sheets.Events.CellChanged, (e, args) => {  
          if (args.propertyName === "value") {  
            var cellType = args.sheet.getCellType(args.row, args.col);  
            if (  
              !cellType ||  
              !(cellType instanceof GC.Spread.Sheets.CellTypes.ComboBox)  
            ) {  
              return;  
            }  
            var state = args.newValue.toLowerCase();  
            // Test: the state selected should alert when selected  
            console.log(state);  
          }  
        });</td>


3.2 선택한 상태로 API의 URL 만들기

위 코드를 적용하고 선택 후 상태 약어를 통해 테스트 성공 알림을 받고 나면 상태 변수를 사용해 원하는 URL을 가져와 COVID-19 Tracking Project API에서 상태 데이터를 가져옵니다. 이 과정은 아래 3.2에 나와 있습니다.

// 3.1 - Bind the CellChanged event to trigger when a new item is selected from the from comboBox  
        spread.bind(GC.Spread.Sheets.Events.CellChanged, (e, args) => {  
          if (args.propertyName === "value") {  
            var cellType = args.sheet.getCellType(args.row, args.col);  
            if (  
              !cellType ||  
              !(cellType instanceof GC.Spread.Sheets.CellTypes.ComboBox)  
            ) {  
              return;  
            }  
            var state = args.newValue.toLowerCase();  
            // Test: The state selected should alert when selected  
            alert(state);  
            // 3.2 - use the selected state for API's url to get the data  
            var apiUrl =  
              "https://covidtracking.com/api/v1/states/" +  
              state +  
              "/current.json";  
            // Test: The Covid Tracking Projects state API's URL should appear in console  
              console.log(apiUrl);  
          }  
        });</td>


3.3 URL 데이터를 가져와 셀 바인딩 소스로 설정

두 테스트 모두 기대한 결과를 얻었다면 이제 3.13.2 파트에 포함된 alertconsole을 제거해도 됩니다. 그다음에는 3.2 단계에서 만든 URL과 함께 getJSON 메서드를 사용해 URL의 API에서 JSON 데이터를 가져옵니다. 이어서 아래 3.3으로 표시된 부분과 같이 반환된 데이터를 시트 셀 바인딩 데이터 소스로 설정합니다.

// 3.1 - Bind the CellChanged event to trigger when a new item is selected from the from comboBox  
        spread.bind(GC.Spread.Sheets.Events.CellChanged, (e, args) => {  
          if (args.propertyName === "value") {  
            var cellType = args.sheet.getCellType(args.row, args.col);  
            if (  
              !cellType ||  
              !(cellType instanceof GC.Spread.Sheets.CellTypes.ComboBox)  
            ) {  
              return;  
            }  
            var state = args.newValue.toLowerCase();  
            // 3.2 - use the selected state for API's url to get the data  
            var apiUrl =  
              "https://covidtracking.com/api/v1/states/" +  
              state +  
              "/current.json";  
              // 3.3 - getJSON data from URL  
              $.getJSON(apiUrl, function (data) {  
              spread.suspendPaint();  
              spread.suspendCalcService();  
              // 3.3 - Set the URL's data as the sheets data source  
              sheet.setDataSource(  
                new GC.Spread.Sheets.Bindings.CellBindingSource(data)  
              );  
              spread.refresh();  
              spread.resumeCalcService();  
              spread.resumePaint();  
            });  
          }  
        });</td>


SpreadJS 응용 프로그램은 모든 단계의 코드 논리를 적용하고 런타임 디자이너 템플릿을 만들어 적용한 후 디자이너로 추가된 템플릿의 셀 바인딩 경로를 사용해 데이터를 표시합니다.


셀 바인딩 경로


3.4 SpreadJS 뷰포트 수정

이제 SpreadJS 뷰포트를 수정하여 열 및 행 헤더, 세로 및 가로 스크롤 막대, 탭 스트립을 제거합니다. 이렇게 하려면 시트 옵션인 colHeaderVisiblerowHeaderVisiblefalse로 설정한 다음, 통합 문서 옵션인 showHorizontalScrollbar, showVerticalScrollbartabStripVisible을 설정하면 됩니다.

      // 3.4) Modify the viewport  
        var sheet = spread.getActiveSheet();  
          sheet.options.colHeaderVisible = false;  
          sheet.options.rowHeaderVisible = false;  
          spread.options.showHorizontalScrollbar = false;  
          spread.options.showVerticalScrollbar = false;  
          spread.options.tabStripVisible = false;


셀 바인딩 데이터


이것으로 자습서를 모두 살펴보았습니다. 우리는 SpreadJS 사용, 런타임 디자이너를 사용해 템플릿 만들기, 셀 유형 만들기, URL에서 데이터 소스 설정하기, 이벤트를 사용해 데이터 로드하기, SpreadJS 뷰포트 수정에 대해 알아보았습니다.


SpreadJS로 더 많은 작업을 하고 다른 여러 가지 기능에 대해 알아보려면 GrapeCity의 SpreadJS에서 30일 무료 평가판을 다운로드하십시오.

  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.