Slate Visualization 위젯

Visualization에는 Graph, Image Gallery, Map, Table, Toast와 Tree가 있습니다. 아래에서 선택과 hover 등 상호작용값을 따로 표시하며 나머지는 편집 설정입니다.

Graph

Graph는 nodes와 edges로 관계를 표시합니다.

Force Directed는 노드를 펼쳐 배치하고 Flow는 간선이 지정 방향으로 향하도록 배치합니다. Manual에서는 끌어서 바꾼 위치를 저장할 수 있지만 다른 배치에서 끌어 바꾼 위치는 저장하지 않습니다.

nodeColorScaleRange는 색 두 개 이상을 사용합니다. 값 [0,5,10]과 색 ["red","blue"]는 빨강, 보라, 파랑입니다. 생략하거나 두 색 미만이면 Blueprint @green4, @gold4와 @red4에 해당하는 #15B371, #F2B824, #F55656을 사용합니다.

IEdges와 INodes

구성 예

graph가 노드와 간선 배열 및 이미지 URL들을 반환하는 동적 예입니다.

{
  "camera": {
    "ratio": null,
    "x": null,
    "y": null
  },
  "edges": {
    "sourceNodeIds": "{{graph.sourceNodeIds}}",
    "targetNodeIds": "{{graph.targetNodeIds}}"
  },
  "nodes": {
    "icons": "{{graph.iconUrls}}",
    "ids": "{{graph.ids}}",
    "labels": "{{graph.ids}}",
    "xPositions": "{{graph.xPositions}}",
    "yPositions": "{{graph.yPositions}}"
  },
  "selectedNodeIds": [
    "n18"
  ]
}

정적 다섯 노드 예입니다. defaultNodeIcon의 이미지 경로는 해당 Slate 환경에서 접근 가능한 리소스로 준비합니다.

{
  "camera": {
    "ratio": null,
    "x": null,
    "y": null
  },
  "defaultNodeIcon": "resources/map-people.svg",
  "edges": {
    "ids": [
      "e1",
      "e2",
      "e3",
      "e4",
      "e5"
    ],
    "labels": [
      "e1",
      "e2",
      "e3",
      "e4",
      "e5"
    ],
    "sourceNodeIds": [
      "n1",
      "n2",
      "n3",
      "n4",
      "n5"
    ],
    "targetNodeIds": [
      "n2",
      "n3",
      "n4",
      "n5",
      "n1"
    ]
  },
  "layout": {
    "type": "layered"
  },
  "nodes": {
    "ids": [
      "n1",
      "n2",
      "n3",
      "n4",
      "n5"
    ],
    "labels": [
      "n1",
      "n2",
      "n3",
      "n4",
      "n5"
    ],
    "xPositions": [
      100,
      30.9,
      -80.9,
      -80.9,
      30.9
    ],
    "yPositions": [
      0,
      95.1,
      58.78,
      -58.78,
      -95.1
    ]
  },
  "selectedNodeIds": [
    "n1"
  ]
}

기본 구성은 다음과 같습니다.

{
  "camera": {
    "ratio": null,
    "x": null,
    "y": null
  },
  "edges": {
    "sourceNodeIds": [],
    "targetNodeIds": []
  },
  "nodes": {
    "ids": [],
    "xPositions": [],
    "yPositions": []
  },
  "selectedNodeIds": []
}

Image Gallery

필수 imageUrls는 이미지 URL의 String 배열입니다. 선택적인 captions는 각 이미지의 설명 String 배열입니다.

Map

Slate Map은 Leaflet 기반이며 Mapbox 배경 지도를 사용합니다. 배경인 base/tile layer와 업무 데이터를 표현하는 overlay/feature layer를 나누며 feature layer에는 raster와 vector 타일을 사용할 수 있습니다.

지도 용어

레이어

배경과 규모

Property의 Misc > Tile Layer에서 dark, light, satellite, street와 default 등의 배경을 고릅니다. All을 선택하면 지도 안의 Layer Selector에서 종류를 바꿀 수 있습니다.

Shape는 약 1,000 feature 부근에서, Location은 약 5,000~10,000점에서 성능 저하가 나타날 수 있습니다. 이는 고정된 최대 입력 수가 아니라 성능을 검토할 규모입니다. 큰 Shape는 geometry를 단순화하거나 Vector로 제공하는 방식을 고려합니다.

정적 지도에는 이동과 확대를 끌 수 있습니다. feature만 표시하려면 배경 레이어도 제거할 수 있습니다.

레이어 예와 스타일

개별 marker에 class를 부여하고 앱의 Less 스타일에서 색을 정할 수 있습니다.

.city { stroke: @cyan3; fill: @cyan5; }
.town { stroke: @pink3; fill: @pink5; }
.village { stroke: @lime3; fill: @lime5; }

레이어 이름 또는 .layer${layerIndex}로 그 레이어의 마커와 군집을 함께 꾸밀 수도 있습니다. 유효한 CSS class인 레이어 이름만 class로 추가됩니다.

.cities {
  background-color: @blue5;
  fill: @blue5;
  stroke: @blue2;
  border-color: @blue2;
}
.layer1 {
  background-color: @green5;
  fill: @green5;
  stroke: @green2;
  border-color: @green2;
}

지도 속성

타일 URL의 형식 예는 https://{s}.example.com/blah/{z}/{x}/{y}.png입니다. 이는 실제 서비스 주소로 바꿔야 하며 s는 선택적인 하위 도메인, z는 확대 수준, x/y는 타일 좌표입니다.

공통 경계와 선택

선택 도형의 필드는 사용자 상호작용으로 바뀝니다. ILayerModel은 필수 type과 해당 레이어에 맞는 options 객체를 갖습니다. 유형은 Choropleth, Location, Heat map/Heat grid, Shape, Vector 또는 Raven의 설정에 맞춥니다.

Location options

Shape options

큰 GeoJSON을 앱에 직접 저장하면 앱 크기 한도에 영향을 주므로 Server Resource나 질의를 사용합니다.

Choropleth options

IColorScaleOptions의 필수 필드는 다음과 같습니다.

예를 들어 값 [0,25,100]과 색 ["red","yellow","green"]이면 빨강, 주황, 초록으로 나타냅니다.

Heat map options

필수 latitudes, longitudes와 values는 Number 배열입니다. 선택적 scaleRadiusEnabled의 기본값은 true입니다. 확대에 따라 radius를 조정하면 지도 척도의 값으로 사용하며 기본 radius는 2입니다. 조정하지 않으면 픽셀 단위이며 기본 radius는 20입니다.

Heat grid options

Vector options

IVectorTileLayerOptions의 baseStyle, clickStyle과 hoverStyle은 선택적인 IVectorTileStyleOptions입니다. vectorTileOptions는 필수입니다.

IVectorTileStyleOptions의 모든 필드는 선택 사항입니다. color(String)는 모든 feature와 outline의 색, radius(Number)는 점의 반지름, size(Number)는 선과 outline의 두께입니다. outline은 다각형 경계의 color와 size를 담은 객체입니다.

Raven options

필수 serverUri는 Raven 서버 URI이며 slate.yml의 script와 image CSP에 해당 도메인을 명시적으로 허용해야 합니다. 선택적 filter는 필수 propertyName과 propertyValue String을 갖습니다. 예를 들어 City 속성의 Medford 값을 필터링할 수 있습니다.

Table

클라이언트 방식은 서버 호출이 적지만 데이터를 먼저 모두 읽어야 하므로 메모리를 더 사용합니다. 서버 방식에서 pageSize가 10이면 질의도 최대 10행만 반환해야 합니다.

열과 grid 옵션

열 끌기 재정렬을 켜도 체크박스 열은 고정되며 이동할 수 없습니다.

hover와 페이징

ITableHover는 필수 columnIndex(Number, 0부터 시작), displayValue(String), isHeader(String)를 갖습니다. ITablePagingOptions는 필수 currentOffset(Number, 0부터 시작하는 현재 페이징 위치), pageSize(Number), 선택적 totalServerItems(Number)를 갖습니다. currentOffset은 상호작용값이고 다른 두 값은 편집 설정입니다.

동적 표

query1이 id, name, address, phone_number와 score 열을 반환하는 예입니다. 서버 페이지당 최대 10행을 가져오고 전체 결과 수는 100으로 구성한 예제입니다.

{
  "columnData": "{{query1}}",
  "columnOptions": {
    "id": {
      "name": "ID",
      "width": 50
    },
    "name": {
      "name": "Full Name"
    },
    "address": {
      "name": "Home Address"
    },
    "phone_number": {
      "name": "Phone Number"
    },
    "score": {
      "name": "Score",
      "horizontalAlignment": "right"
    }
  },
  "columnOrder": [
    "id",
    "name",
    "address",
    "phone_number",
    "score"
  ],
  "gridOptions": {
    "enableSelection": true,
    "enableSorting": true,
    "pagingOptions": {
      "currentOffset": 0,
      "pageSize": 10,
      "totalServerItems": 100
    },
    "selectionOptions": {
      "checkbox": false,
      "multiSelect": true
    },
    "sortOptions": {
      "columnId": "score",
      "isAscending": false
    }
  },
  "selectedRowKeys": [],
  "selectionIdentityColumnId": "id",
  "serverEnabled": true,
  "tooltipsEnabled": false
}

정적 표와 기본값

{
  "columnData": {
    "staticOptions": [
      "option1",
      "option2",
      "option3"
    ]
  },
  "columnOptions": {},
  "columnOrder": [],
  "gridOptions": {
    "enableSelection": true,
    "selectionOptions": {
      "checkbox": true,
      "multiSelect": false
    }
  },
  "selectedRowKeys": [],
  "selectionIdentityColumnId": "staticOptions",
  "serverEnabled": false,
  "tooltipsEnabled": false
}

{
  "columnOptions": {},
  "columnOrder": [],
  "gridOptions": {},
  "selectedRowKeys": [],
  "selectionIdentityColumnId": "Metric",
  "serverEnabled": false,
  "tooltipsEnabled": false
}

항공편 표 만들기

Visualization > Table을 추가하고 이름을 w_flightTable로 정합니다. Legacy Foundry 질의 q_allFlights의 열 데이터를 Data의 "{{q_allFlights}}"에 연결합니다. 이 값은 유효한 JSON 문자열 안에 Handlebars 참조를 둔 형식이며 Slate가 결과 객체로 해석합니다.

Add all columns로 열 표시 설정을 엽니다. flight_id는 숨기되 데이터에는 남겨 행 선택 키로 사용합니다. 다른 열에는 Title을 정하고 timestamp 열에 Moment 형식을 지정합니다.

Misc에서 Allow Selection과 Enable Sorting을 켜고 Key column ID를 flight_id로 지정합니다.

Server Paging/Sorting을 끄면 이미 로드한 행만 정렬하고 나눕니다. 처음 질의가 10행만 가져왔다면 그 10행만 대상입니다. 브라우저에서 다룰 수 있는 약 5,000~10,000행은 사용자의 탭 자원에 따라 달라집니다.

서버 페이징과 정렬

Enable Paging과 Server Paging/Sorting을 켜고 예를 들어 Page Size를 20으로 정합니다. q_allFlights의 LIMIT과 OFFSET에 표의 값을 연결합니다.

SELECT
    flight_id,
    carrier_code,
    tail_num,
    origin,
    dest,
    dep_ts_utc,
    arr_ts_utc,
    distance,
    actual_elapsed_time
FROM "foundry_sync"."{{v_flightTable}}"
LIMIT {{w_flightTable.gridOptions.pagingOptions.pageSize}}
OFFSET {{w_flightTable.gridOptions.pagingOptions.currentOffset}}

전체 결과 수는 q_flightCount 질의로 구합니다.

SELECT
    COUNT(flight_id) as num_flights
FROM "foundry_sync"."{{v_flightTable}}"

Server Total에는 다음을 연결합니다.

{{q_flightCount.num_flights.[0]}}

예제 데이터의 last-mile-flights는 73,946행으로 약 75,000행이며 flights는 약 420만 행입니다. 실제 앱에서는 count 질의가 반환한 값을 사용합니다.

정렬도 서버에 반영하도록 ORDER BY에 columnId와 isAscending을 연결합니다. 단순한 분기는 if 블록으로, 복잡한 로직은 Slate 함수로 처리합니다. 전체 질의는 다음과 같습니다.

SELECT
    flight_id,
    carrier_code,
    tail_num,
    origin,
    dest,
    dep_ts_utc,
    arr_ts_utc,
    distance,
    actual_elapsed_time
FROM "foundry_sync"."{{v_flightTable}}"
ORDER BY {{w_flightTable.gridOptions.sortOptions.columnId}}
    {{#if w_flightTable.gridOptions.sortOptions.isAscending}}
        ASC
    {{else}}
        DESC
    {{/if}}
LIMIT {{w_flightTable.gridOptions.pagingOptions.pageSize}}
OFFSET {{w_flightTable.gridOptions.pagingOptions.currentOffset}}

이 예제는 FOUNDRY 동기화 소스의 SQL입니다. 외부 SQL 소스에는 별도의 보안 helper 규칙을 적용합니다.

Text 위젯으로 All Flights 또는 Last Mile Flights 제목을 만들고 표 왼쪽 위에 배치합니다. Ctrl, macOS에서는 Cmd를 사용해 표와 제목을 함께 선택하거나 영역으로 선택하여 정렬할 수 있습니다.

Toast

open과 close 액션으로 열고 닫습니다. 완전히 열리면 didOpen, 완전히 닫히면 didClose가 발생합니다. click은 Toast의 동작 버튼을 눌렀을 때의 이벤트입니다.

{
  "actionText": "Toast Example",
  "hasAction": false,
  "intent": -1,
  "message": "Toast Message",
  "timeout": 600
}

{
  "actionText": "Action!",
  "hasAction": false,
  "intent": -1,
  "message": "Message",
  "timeout": 3000
}

Tree

필수 contents는 Blueprint ITreeNode 구조를 사용하는 계층 JSON, selected는 선택한 노드 ID의 JSON 값입니다. 필수 selectionType은 none, single 또는 multiple입니다.

기본 구성은 다음처럼 자식 노드와 초기 선택 상태를 포함합니다.

{
  "contents": [
    {
      "childNodes": [
        {
          "id": 3,
          "label": "bar 1"
        },
        {
          "id": 4,
          "label": "bar 2"
        }
      ],
      "iconName": "folder-close",
      "id": 1,
      "label": "bars"
    },
    {
      "id": 2,
      "label": "foo"
    }
  ],
  "searchText": "",
  "selectedNodes": [],
  "selectionType": "single"
}