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

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-04-09 09:48 조회 3,673회 댓글 0건

본문

관련링크

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

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

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

런타임 디자이너

수행 단계:

대시보드 템플릿을 만들어 적용
콤보 상자 셀 유형 만들기
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*으로 지정했습니다.

템플릿 내보내기

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

template.js 다운로드

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

최종 단계: 프로젝트에 template.js 파일을 포함한 후 SpreadJS의 fromJSON 및 refresh 메서드를 사용해 대시보드 템플릿에서 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>

그런 다음, fromJSON 및 refresh 메서드를 사용해 템플릿에서 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.1 및 3.2 파트에 포함된 alert 및 console을 제거해도 됩니다. 그다음에는 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 뷰포트를 수정하여 열 및 행 헤더, 세로 및 가로 스크롤 막대, 탭 스트립을 제거합니다. 이렇게 하려면 시트 옵션인 colHeaderVisible 및 rowHeaderVisible을 false로 설정한 다음, 통합 문서 옵션인 showHorizontalScrollbar, showVerticalScrollbar 및 tabStripVisible을 설정하면 됩니다.

      // 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;

셀 바인딩 데이터