Slate 차트 위젯

Chart에는 막대, 누적 막대, 가로 막대, 여러 series의 선, 산점도, Gantt, Heat Grid, Pie와 Tree Map이 있습니다. 공통 차트 설정과 별도 위젯의 입력 계약을 구분하여 구성합니다.

이 장의 query1은 각 예제에서 참조하는 열을 배열로 반환하는 입력 질의입니다. 예제마다 해당 입력을 준비하고 위젯 이름을 참조와 맞춥니다. 표에서 별도 표시하지 않은 속성은 편집 설정이며 선택과 hover는 사용자 상호작용값입니다.

공통 차트 속성

hover를 참조할 때에는 JSON 구성에 "hover":{"xValue":null,"yValue":null}을 먼저 둡니다. redraw 액션은 차트를 다시 그립니다.

축: IAxis

일반 XY 차트의 timeseries 축은 epoch 이후 밀리초 정수를 받습니다. SQL 날짜가 문자열이면 변환할 수 있습니다. MySQL의 표현은 UNIX_TIMESTAMP(date_column)*1000 AS date_number, PostgreSQL은 EXTRACT(epoch FROM date_column)*1000 AS date_number입니다. xValues도 "{{query1.date_number}}"로 바꿉니다. 아래 Gantt의 시작/끝 입력은 해당 renderer의 별도 예를 따릅니다.

데이터와 상호작용 자료형

IDatasetModel

예를 들어 X가 [1,1], Y가 [1,2], series가 ["series1","series2"]인 누적 막대는 X=1에서 series1 위에 series2를 쌓습니다. 선 차트는 series마다 선을 만듭니다.

좌표와 범위

산점도 범례는 해당 series의 마지막 symbol을 사용합니다. 마지막 값이 없거나 유효하지 않으면 circle을 사용합니다.

선택과 hover

아래 필드는 모두 필수 상호작용값입니다.

선, 막대와 산점도 예

기본 차트

{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "renderer": "line",
      "xValues": [],
      "yValues": []
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "scale": "linear"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "scale": "linear",
      "position": "left"
    }
  ]
}

범례를 표시하는 막대

state와 avgIncome 열을 X/Y로 연결하고 State와 Average Income ($) 축을 사용합니다. 범례는 위쪽이며 Y축의 형식과 고정 범위를 지정합니다.

{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "renderer": "bar",
      "xValues": "{{query1.state}}",
      "yValues": "{{query1.avgIncome}}"
    }
  ],
  "labelsEnabled": false,
  "legendEnabled": true,
  "legendPosition": "top",
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "label": "State",
      "scale": "category"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "formatter": "$0,0.00",
      "position": "left",
      "label": "Average Income ($)",
      "scale": "linear",
      "scaleMax": 1000000,
      "scaleMin": 10000
    }
  ]
}

누적 막대

gender를 seriesValues로 연결하여 state별 avgIncome을 series로 나눕니다.

{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "renderer": "stackedBar",
      "seriesValues": "{{query1.gender}}",
      "xValues": "{{query1.state}}",
      "yValues": "{{query1.avgIncome}}"
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "label": "State",
      "scale": "category"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "formatter": "$0,0.00",
      "position": "left",
      "label": "Average Income ($)",
      "scale": "linear",
      "scaleMax": 1000000,
      "scaleMin": 10000
    }
  ]
}

가로 막대

renderer는 horizontalBar이며 avgIncome이 X, state가 Y입니다.

{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "renderer": "horizontalBar",
      "xValues": "{{query1.avgIncome}}",
      "yValues": "{{query1.state}}"
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "label": "Average Income ($)",
      "scale": "linear"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "position": "left",
      "label": "State",
      "scale": "category"
    }
  ]
}

여러 series의 선

series, key와 doc_count 배열을 연결합니다.

{
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "renderer": "line",
      "seriesValues": "{{query1.series}}",
      "xValues": "{{query1.key}}",
      "yValues": "{{query1.doc_count}}"
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "scale": "linear"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "scale": "linear",
      "position": "left"
    }
  ]
}

산점도

gdp와 cpi를 좌표로, pop을 반지름으로 사용합니다.

{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "radiusValues": "{{query1.pop}}",
      "renderer": "scatter",
      "xValues": "{{query1.gdp}}",
      "yValues": "{{query1.cpi}}"
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "scale": "linear"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "scale": "linear",
      "position": "left"
    }
  ]
}

항공편 산점도 구성

Widget > Chart > Scatter Plot을 추가하고 미리 들어 있는 예제 데이터를 지운 뒤 이름을 w_routeMetrics로 정합니다. q_routeMetrics의 avg_distance를 X Values, avg_time을 Y Values에 연결합니다.

X축 이름을 Distance, 레이블을 Distance (miles)로 정하고 필요한 격자를 켭니다.

Y축 이름은 Duration, 레이블은 Average Duration (minutes)입니다.

Radius에 num_flights를 그대로 넣으면 값 1이 반지름 1px에 대응하므로 150편을 넘는 항로의 점은 화면을 크게 가립니다. Number 변수 v_routeCountDisplayScale을 100으로 만들고 표시용 num_flights_disp 열을 계산합니다. 다음은 Legacy Foundry Postgres 동기화를 사용하는 질의입니다.

SELECT
    origin,
    dest,
    AVG(distance) as avg_distance,
    AVG(actual_elapsed_time) as avg_time,
    COUNT(flight_id) as num_flights,
    COUNT(flight_id)::double precision / {{v_routeCountDisplayScale}} as num_flights_disp,
    CONCAT(origin, ' -> ', dest) as route_name
FROM "foundry_sync"."{{v_flightTable}}"
GROUP BY
    origin,
    dest
ORDER BY
    COUNT(flight_id) DESC
LIMIT 50

Radius를 num_flights_disp로 바꾸고 Title을 Route Metrics로 정합니다. route_name은 출발지와 도착지를 연결한 표시 레이블입니다.

X/Y 구간을 더한 선 차트

yRange는 2~3, xRange는 2.5~3.5와 6~8 구간을 함께 표시합니다.

{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "name": "dataset1",
      "renderer": "line",
      "xValues": [1,2,3,4,5,6,7,8,9],
      "yValues": [3,4,1,4,5,4,2,4,1],
      "seriesValues": null,
      "xAxisName": "x1",
      "yAxisName": "y1"
    },
    {
      "endValues": [3],
      "name": "dataset2",
      "renderer": "yRange",
      "startValues": [2]
    },
    {
      "endValues": [3.5,8],
      "name": "dataset3",
      "renderer": "xRange",
      "startValues": [2.5,6],
      "seriesValues": ["Range A","Range B"]
    }
  ],
  "labelsEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "gridlinesEnabled": true,
      "name": "x1",
      "position": "bottom",
      "scale": "linear",
      "label": "",
      "formatter": "0"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "position": "left",
      "scale": "linear",
      "formatter": "0"
    }
  ]
}

Gantt

Gantt는 범주형 Y축의 항목을 시작과 끝이 있는 수평 막대로 표시합니다. 일정, 프로젝트 단계와 이벤트 길이에 사용할 수 있습니다.

renderer는 gantt, X축은 timeseries, Y축은 category여야 합니다. IGanttDatasetModel은 공통 이름과 series 설정에 startValues, endValues, labels와 yValues를 사용합니다. yValues는 필수 Any 배열이며 시작/끝 배열과 길이가 같아야 합니다. labels를 제공할 때에도 yValues와 길이가 같아야 합니다. redraw를 사용할 수 있습니다.

기본값

{
  "animate": true,
  "areaSelectionEnabled": false,
  "autorangePanZoomEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "endValues": ["4/3/2015 9:00", "4/5/2015 9:00", "4/7/2015 9:00"],
      "labels": ["Label 1", "Label 2", "Label 3"],
      "name": "dataset1",
      "renderer": "gantt",
      "seriesValues": ["a", "b", "a"],
      "startValues": ["4/1/2015 9:00", "4/2/2015 9:00", "4/4/2015 9:00"],
      "yValues": ["Event 1", "Event 2", "Event 3"]
    }
  ],
  "labelsEnabled": false,
  "legendEnabled": false,
  "panZoomEnabled": false,
  "tooltipsEnabled": false,
  "xAxes": [
    {
      "betweenTicks": false,
      "gridlinesEnabled": false,
      "name": "x1",
      "position": "bottom",
      "scale": "timeseries",
      "visible": true
    }
  ],
  "yAxes": [
    {
      "betweenTicks": false,
      "gridlinesEnabled": false,
      "name": "y1",
      "position": "left",
      "scale": "category",
      "visible": true
    }
  ],
  "zeroBoundYAxisEnabled": true
}

질의 결과 연결

위젯 이름을 w_ganttChart로 정하고 startDate, endDate, taskName과 phase 배열을 연결합니다.

{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "endValues": "{{query1.endDate}}",
      "labels": "{{query1.taskName}}",
      "name": "dataset1",
      "renderer": "gantt",
      "seriesValues": "{{query1.phase}}",
      "startValues": "{{query1.startDate}}",
      "yValues": "{{query1.taskName}}"
    }
  ],
  "labelsEnabled": false,
  "legendEnabled": true,
  "legendPosition": "top",
  "panZoomEnabled": false,
  "tooltipsEnabled": true,
  "tooltipText": "{{w_ganttChart.hover.yValue}}",
  "hover": {"xValue": null, "yValue": null},
  "xAxes": [
    {
      "gridlinesEnabled": true,
      "name": "x1",
      "position": "bottom",
      "scale": "timeseries",
      "label": "Date"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "position": "left",
      "scale": "category",
      "label": "Task"
    }
  ]
}

단계별 색상

Planning, Engineering, QA와 Operations에 지정한 색상으로 Design, Develop, Test와 Deploy 구간을 표시합니다.

{
  "animate": true,
  "areaSelectionEnabled": false,
  "dataSelectionEnabled": false,
  "datasets": [
    {
      "endValues": ["4/5/2015 9:00", "4/8/2015 9:00", "4/12/2015 9:00", "4/15/2015 9:00"],
      "labels": ["Design", "Develop", "Test", "Deploy"],
      "name": "dataset1",
      "renderer": "gantt",
      "seriesColors": ["#2965CC", "#29A634", "#D99E0B", "#D13913"],
      "seriesNames": ["Planning", "Engineering", "QA", "Operations"],
      "seriesValues": ["Planning", "Engineering", "QA", "Operations"],
      "startValues": ["4/1/2015 9:00", "4/4/2015 9:00", "4/8/2015 9:00", "4/11/2015 9:00"],
      "yValues": ["Design", "Develop", "Test", "Deploy"]
    }
  ],
  "labelsEnabled": false,
  "legendEnabled": true,
  "legendPosition": "right",
  "panZoomEnabled": false,
  "tooltipsEnabled": true,
  "tooltipText": "{{w_ganttChart.hover.yValue}}",
  "hover": {"xValue": null, "yValue": null},
  "xAxes": [
    {
      "gridlinesEnabled": true,
      "name": "x1",
      "position": "bottom",
      "scale": "timeseries",
      "label": "Timeline"
    }
  ],
  "yAxes": [
    {
      "gridlinesEnabled": false,
      "name": "y1",
      "position": "left",
      "scale": "category",
      "label": "Phase"
    }
  ]
}

Heat Grid

Heat Grid의 축은 Category이며 각 축에 선택적인 label(String), 필수 position(String)과 visible(Boolean)을 지정합니다. X축 위치는 top/bottom, Y축은 left/right입니다.

cellValues가 [0,5,10], colorScale이 ["red","blue"]이면 빨강, 보라, 파랑으로 표시합니다. 색상은 hex 또는 CSS 색 이름입니다. 색을 생략하거나 두 개보다 적게 주면 50% 불투명도의 Blueprint @blue5(#B9D7EA)에서 @blue1(#1F6B9A)까지의 기본 범위를 사용합니다.

IHeatGridSelection의 필수 필드는 cellValues(Number 배열), indices(Number 배열), xValues와 yValues(Any 배열)입니다. redraw를 사용할 수 있습니다.

기본값

{
    "cellValues": [],
    "colorScale": ["#B9D7EA", "#1F6B9A"],
    "labelsEnabled": false,
    "xAxis": {
        "gridlinesEnabled": false,
        "name": "x1",
        "position": "bottom",
        "scale": "category",
        "visible": true
    },
    "xValues": [],
    "yAxis": {
        "gridlinesEnabled": false,
        "name": "y1",
        "position": "left",
        "scale": "category",
        "visible": true
    },
    "yValues": []
}

Pie와 Doughnut

IPieHover는 필수 index(Number), key(Any), value(Number)를 갖습니다. IPieSelection은 필수 indices(Number 배열), keys(Any 배열), values(Number 배열)를 갖습니다. 모두 상호작용값이며 redraw 액션도 사용할 수 있습니다.

팀별 인원 원형 차트

{
  "keys": "{{query1.teamName}}",
  "labelsEnabled": false,
  "legendPosition": "right",
  "selectionEnabled": false,
  "tooltipsEnabled": false,
  "values": "{{query1.headCount}}"
}

도넛 구멍 0.6

{
  "innerPadding": 0.6,
  "keys": "{{query1.teamName}}",
  "labelsEnabled": false,
  "legendPosition": "right",
  "selectionEnabled": false,
  "tooltipsEnabled": false,
  "values": "{{query1.headCount}}"
}

기본값

{
  "keys": [],
  "labelsEnabled": false,
  "legendPosition": "right",
  "selectionEnabled": false,
  "tooltipsEnabled": false,
  "values": []
}

Tree Map

Tree Map은 계층 정보를 중첩된 사각형으로 표시합니다. size는 면적, label은 이름, 선택적인 category는 그룹과 색상, 선택적인 density는 색의 변화량을 정합니다.

주식의 산업, 시장 내 비중과 가격 변화를 함께 표시할 수 있습니다.

공장 위치를 지역으로 묶고 생산량과 오탐 비율을 표시하는 예입니다.

클러스터 노드는 저장 공간의 크기와 사용률로 표시할 수 있습니다.

국가는 세계 지역별로 묶고 인구를 면적으로 표현할 수 있습니다.

데이터

기본 예제는 I와 II 두 category를 사용합니다. H는 size 45로 가장 크고 density 3으로 기본 설정에서 가장 어둡습니다. 색상 패널의 반전 옵션으로 그라디언트 방향을 바꿀 수 있습니다.

Category와 density를 함께 사용

HSV 색 공간의 그라디언트를 사용합니다. category마다 0~360의 hue를 목록이나 이름별 맵으로 지정합니다. 모든 category는 같은 시작 saturation과 value를 사용하며 brighten, darken, saturate, desaturate 중 그라디언트 유형과 강도를 정합니다.

Category만 사용

색 목록 또는 category 이름에서 색으로 연결하는 맵을 사용합니다. hex와 red, green 같은 CSS 이름을 지정할 수 있습니다.

Density만 사용

최소 두 색으로 그라디언트를 만듭니다. 더 많은 색을 넣어 중간 구간도 지정할 수 있습니다.

둘 다 사용하지 않음

개별 셀에 색상 팔레트를 제공합니다. 지정할 색상 목록의 길이는 데이터 항목 수와 같아야 합니다.

기타 설정

셀의 경계 폭과 색상, 레이블과 tooltip을 설정할 수 있습니다. 범례는 top/bottom/left/right 위치와 제목을 지정합니다. 셀 배치 방식은 Binary, Dice, Resquarify, Slice, Slice Dice와 Squarify이며 단일 또는 다중 선택도 지원합니다.

포트폴리오 비교 예

다음 예제는 종목 이름, 투자 크기, 가격 변화율과 산업을 사용합니다.

{
  "labels": [
    "MSFT",
    "AAPL",
    "NFLX",
    "AMZN",
    "GS",
    "MS",
    "BLK",
    "JPM",
    "XOM",
    "BP"
  ],
  "sizes": [
    10,
    20,
    5,
    25,
    8,
    15,
    18,
    30,
    10,
    40
  ],
  "densities": [
    8,
    15,
    -10,
    10,
    3,
    -5,
    -3,
    4,
    20,
    8
  ],
  "categories": [
    "Tech",
    "Tech",
    "Tech",
    "Tech",
    "Finance",
    "Finance",
    "Finance",
    "Finance",
    "Energy",
    "Energy"
  ]
}

category와 density를 함께 사용하면 산업별 그룹과 개별 변화를 함께 봅니다.

density만 사용하면 가격 변화가 큰 종목을 살펴볼 수 있습니다.

category만 사용하면 산업별 비중과 그 안의 종목 크기를 비교합니다. 산업 대신 Red/Amber/Green 위험 등급처럼 다른 분류를 색으로 표현하는 구성도 가능합니다.

두 항목을 끄면 원형 차트처럼 각 종목의 비중을 면적으로 비교합니다. 필요하면 각 사각형의 색을 개별 제공할 수 있습니다.

공통 CSS

선과 범례

.line-plot .render-area g:nth-of-type(1) path {stroke: #6a2d9f;}.line-plot .render-area g:nth-of-type(2) path {stroke:#c993f1;}

.legend .legend-row .legend-entry:nth-of-type(1) path {fill: #6a2d9f;}

두 번째 항목이나 범례 배치에 맞는 선택기를 사용할 수 있습니다.

.legend .legend-row .legend-entry:nth-of-type(2) path,.legend .content .legend-row:nth-of-type(2) path {fill: #c993f1;}

일반, 누적과 묶음 막대

.bar-plot .render-area g:nth-of-type(1) rect,.bar-plot:nth-of-type(1) .render-area rect {fill: #6a2d9f;}.bar-plot .render-area g:nth-of-type(2) rect,.bar-plot:nth-of-type(2) .render-area rect {fill: #c993f1;}

.legend .legend-row .legend-entry:nth-of-type(1) path {
  fill: #6a2d9f;
}

.legend .legend-row .legend-entry:nth-of-type(2) path,
.legend .content .legend-row:nth-of-type(2) path {
  fill: #c993f1;
}

일반 및 누적 영역

채움색, 선 색상과 범례를 각각 조정합니다.

.area-plot .render-area  g:nth-of-type(1) path,.area-plot:nth-of-type(1) path {fill: #009900;}.area-plot .render-area  g:nth-of-type(2) path,.area-plot:nth-of-type(2) path {fill: #99CC00;}

.area-plot:nth-of-type(1) .area,.line-plot .render-area g:nth-of-type(1) path {stroke: #009900;}.area-plot:nth-of-type(2) .area,.line-plot .render-area g:nth-of-type(2) path {stroke: #99CC00;}

.legend .legend-row .legend-entry:nth-of-type(1) path {fill: #009900;}

.legend .legend-row .legend-entry:nth-of-type(2) path,.legend .content .legend-row:nth-of-type(2) path {fill: #99CC00;}

원형 조각

인덱스로 조각과 범례를 선택하는 예입니다.

.pie-plot .render-area .arc:nth-of-type(1) {fill: #009900;}

.arc:nth-of-type(2) { fill: #99CC00; }

sl-pie .legend .legend-row:nth-of-type(1) path { fill: #009900; }
sl-pie .legend .legend-row:nth-of-type(2) path { fill: #99CC00; }

레이블을 정리한 CSS class로도 선택할 수 있습니다. 다음은 _A와 _B에 대한 예입니다.

.pie-plot .render-area .arc._A {fill: #009900;}

.arc._B { fill: #99CC00; }

sl-pie .legend .legend-row ._A path { fill: #009900; }
sl-pie .legend .legend-row ._B path { fill: #99CC00; }