Search

대시보드와 그래프

대시보드는 여러 데이터를 한 곳에서 모아 볼 수 있는 방법입니다. 그래프는 그런 대시보드에서 데이터를 조금 더 편하고 한 눈에 확인할 수 있는 방법입니다.
현재 등록되어있는 쿼리를 모아서 볼 수 있으며, 곧 다양한 형태로 데이터를 볼 수 있도록 지원할 예정입니다

1. 대시보드 등록 시작하기

대시보드 등록은 대시보드 페이지에서 좌상단의 추가 버튼을 선택하여 시작합니다.
+(대시보드 추가) 버튼 선택

2. 대시보드 구성

대시보드 등록 페이지로 이동하면 위와 같은 화면을 보실 수 있습니다.
우측에는 구성되고 있는 대시보드를 확인하실 수 있고, 좌측의 사이드바에서는 대시보드의 설정이나 형태를 조정할 수 있습니다.
우측에서 새로운 데이터를 추가하세요 라고 되어있는 하나의 공간을 아이템이라고 칭하며, 이러한 아이템이 모여있는 커다란 공간을 영역이라 칭합니다.
우하단의 +(영역 추가) 버튼을 선택하여 영역을 추가할 수 있습니다.
영역을 선택하고 우측의 영역 레이아웃에서 원하는 영역 레이아웃을 선택하여 모양을 변경할 수 있습니다
좌하단의 영역 삭제 버튼을 선택하여 선택되어있는 영역을 삭제할 수 있습니다
또한 아이템을 선택하여 좌측의 사이드바에서 해당 아이템의 정보를 편집할 수 있습니다:
현재 대시보드에서는 등록되어있는 쿼리만을 데이터 유형으로 지원하고 있습니다.
원본 데이터에서 등록된 쿼리를 검색하여 대시보드에 추가할 수 있습니다
사용자 값이 있는 등록된 쿼리를 선택할 경우 사용자 값을 입력하여 실행시킬 수 있습니다
사용자 값이 입력이 되지 않으면 작동하지 않는 쿼리의 경우 에러가 표시됩니다

3. 그래프 - 다양한 형태로 데이터 보기

데이터 표기 유형을 선택하면 다양한 데이터 표기 방법을 확인할 수 있습니다. 기본값은 테이블로 설정되어 있으며 표 형태로 데이터를 표기합니다.
그리고 테이블에 더해 막대 그래프와 넘버 데이터 표기 방법이 있습니다.

막대 그래프

막대 그래프는 데이터를 막대 그래프의 형태로 표시할 수 있습니다:
x축에서 그래프에서 기준으로 사용할 컬럼을 선택 후, y축에서 해당 컬럼을 기준으로 어떤 연산을 하게 될지 선택을 하게 됩니다.
아래 그래프는 저희가 제공하고 있는 샘플 데이터의 customer 테이블의 컬럼인 name을 기준으로 데이터의 총 개수를 센 데이터입니다.
또는 y축에서 합계를 선택하면 합계를 계산할 컬럼을 별도로 선택할 수 있습니다.
예를 들어 아래의 설정은 customer.name을 기준으로 payment_method.customerid를 모두 더한 값이 막대그래프에 표시되게 됩니다.
x축, y축을 선택하여 값을 입력하면 그래프의 해당하는 축에 텍스트를 입력할 수 있습니다.
x축의 데이터가 너무 많은 경우 몇몇 데이터는 x축의 값 이름이 공백으로 표시됩니다.
다만, 해당 데이터의 막대 부분을 선택하면 해당 값이 표시됩니다.

직접 쿼리로 작성한 예시

막대 그래프는 x축과 y축에 보여줄 데이터가 필요합니다. 2개의 열을 가진 데이터로 쿼리해주세요. 첫번째 열의 값이 x축의 데이터이고 두번째 열의 값이 y축의 데이터로 표시됩니다.
아래 샘플 데이터의 쿼리는 막대 그래프로 이렇게 표시됩니다.
SELECT customer.name AS "고객 이름", sum(add_point.points)::int AS "포인트의 합" FROM customer JOIN point ON point.customer_id = customer.id JOIN add_point ON add_point.id = point.id GROUP BY customer.name
SQL
복사

파이 그래프

파이 그래프는 데이터를 파이의 형태로 나타낼 수 있습니다.
x축에서 그래프에서 기준으로 사용할 컬럼을 선택 후, y축에서 해당 컬럼을 기준으로 어떤 연산을 하게 될지 선택을 하게 됩니다.
아래 그래프는 저희가 제공하고 있는 샘플 데이터의 store 테이블의 컬럼인 name을 기준으로 데이터의 총 개수를 센 데이터입니다.
또는 y축에서 합계를 선택하면 합계를 계산할 컬럼을 별도로 선택할 수 있습니다.
예를 들어 아래의 설정은 store.name을 기준으로 payment_method.customerid를 모두 더한 값이 파이 그래프에 표시되게 됩니다.
x축, y축을 선택하여 값을 입력하면 그래프의 해당하는 범례에 텍스트를 입력할 수 있습니다.

직접 쿼리로 작성한 예시

파이 그래프는 x축과 y축에 보여줄 데이터가 필요합니다. 2개의 열을 가진 데이터로 쿼리해주세요. 첫번째 열의 값이 x축의 데이터이고 두번째 열의 값이 y축의 데이터로 표시됩니다.
아래 샘플 데이터의 쿼리는 막대 그래프로 이렇게 표시됩니다.
SELECT customer.name AS "고객 이름", sum(add_point.points)::int AS "포인트의 합" FROM customer JOIN point ON point.customer_id = customer.id JOIN add_point ON add_point.id = point.id GROUP BY customer.name ORDER BY 2 DESC LIMIT 10
SQL
복사

넘버

넘버에서는 다음과 같이 데이터를 간단한 형태의 단일 숫자로 표기할 수 있습니다:
데이터 표기 유형에서 넘버를 선택하면 사용하실 수 있습니다.
목표하는 컬럼의 값을 선택한 후 총 개수, 평균 또는 합계를 선택하면 데이터를 연산하여 아이템에 표시합니다.

직접 쿼리로 작성한 예시

넘버는 1개의 숫자 데이터를 표시합니다. 1개의 열과 1개의 행을 가진 데이터로 쿼리해주세요. 첫번째 열의 첫번째 행의 값이 데이터로 표시됩니다.
아래 샘플 데이터의 쿼리는 넘버로 이렇게 표시됩니다.
SELECT SUM(points)::int AS "총 포인트의 합" FROM add_point JOIN point ON point.id = add_point.id WHERE created_at < now()
Shell
복사

기타

현재 그래프는 탐색에서 생성된 탐색 쿼리에 대해서만 자유로운 컬럼 선택 등의 기능을 모두 지원하고 있습니다.
SQL로 직접 생성한 쿼리의 경우, 대시보드 내에서 컬럼을 변경할 수 없습니다. 가져오는 데이터 값의 첫번째 열을 사용하고 있습니다.
가져오는 첫번째 열의 타입이 그래프를 표기하기에 적절하지 않은 경우 데이터가 제대로 표시되지 않을 수 있습니다.
무언가 부족하신가요?
제품 오른쪽 아래에 있는 ?버튼을 눌러 채팅으로 문의하시거나 cs@hopsoffice.com로 메일을 보내주세요.