시각화 구성요소 및 쿼리 속성을 사용하여 간단한 시각화 렌더링

Query 시각화 구성요소query 속성 사용은 Looker 시각화 구성요소로 삽입 가능한 시각화를 렌더링하는 가장 간단한 방법입니다. dashboard 속성과 반대로 query 속성을 사용하면 다음과 같은 이점이 있습니다.

  • Looker에서 쿼리를 빌드하기만 하면 되며 대시보드를 만들 필요가 없습니다.
  • query에서 허용하는 값(Query.client_id 또는 쿼리 ID)을 변경할 수 없습니다. 기본 모델이 변경되지 않으면 Looker 인스턴스가 변경되어도 삽입된 시각화는 영향을 받지 않습니다.

Looker UI 내의 변경사항에 응답하여 앱 개발자가 아닌 Looker 사용자가 업데이트할 수 있는 삽입 가능한 시각화를 만들려면 시각화 구성요소 및 대시보드 ID를 사용하여 단순한 시각화 렌더링 문서 페이지의 안내를 따르세요.

Looker 시각화 구성요소와 query 속성을 사용하여 삽입 가능한 시각화를 렌더링하려면 설정이 요구사항을 충족하는지 확인한 후 다음 단계를 수행합니다.

  1. Explore에서 쿼리를 빌드하고 Query.client_id 값을 복사합니다.
  2. React 애플리케이션에 쿼리를 삽입합니다.
  3. Visualization 구성요소를 추가합니다.
  4. config 속성으로 설정을 맞춤설정합니다.

요구사항

시작하기 전에 몇 가지 요소가 필요합니다.

  • Looker 인스턴스에 액세스할 수 있어야 합니다.
  • 확장 프로그램 프레임워크에서 또는 독립형 React 애플리케이션에서 빌드하는 여부에 관계없이 Looker의 API로 인증하고 Looker SDK 객체에 액세스할 수 있어야 합니다. 자세한 내용은 Looker API 인증 또는 확장 프로그램 프레임워크를 참조하세요.
  • Looker 시각화 구성요소 NPM 패키지@looker/components-data NPM 패키지를 설치했는지 확인합니다. 시각화 구성요소 패키지 설치 및 사용에 대한 자세한 내용은 GitHubNPM에서 제공되는 README 문서를 참조하세요.

1단계: Explore에서 쿼리 빌드 및 Query.client_id 값 복사

Explore를 사용하여 Looker UI 내에서 쿼리를 빌드합니다. 지원되는 시각화를 Explore에 추가하고 필요한 경우시각화의 설정 메뉴에서 설정을 구성합니다.

브라우저의 주소 표시줄에서 qid URL 속성을 찾습니다. 해당 속성에 할당된 영숫자 값은 Query.client_id입니다.

예를 들어 URL이 https://example.looker.com/explore/thelook/orders?qid=evomfl66xHx1jZk2Hzvv1R&toggle=fil,vis,vse이면 Query.client_idevomfl66xHx1jZk2Hzvv1R입니다.

Query.client_id는 쿼리 및 시각화 설정을 나타내는 고유 문자열입니다. 쿼리 또는 설정에서 항목을 변경하면 Query.client_id가 변경됩니다.

다음 단계에서 사용할 Query.client_id를 복사합니다.

2단계: React 애플리케이션에 쿼리 삽입

이제 Query.client_id를 가져와 React 애플리케이션에 삽입할 수 있습니다.

다음 코드는 가상의 React 애플리케이션용입니다. 이 예시는 Looker 확장 프레임워크에서 빌드되었으며 Looker SDK 객체를 확장 컨텍스트 제공업체에서 가져왔습니다.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return null
}

시작하려면 DataProviderQuery 구성요소를 사용합니다. DataProvider는 SDK 참조를 컨텍스트에 저장하고 Query는 네트워크 요청을 전달하고 응답 렌더링 형식을 지정합니다.

또한 다음 두 가지를 제공해야 합니다.

  • SDK 객체. SDK 객체는 확장 프로그램 컨텍스트에서 가져옵니다.
  • Query.client_id. Query.client_idquery 속성에 할당됩니다.
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return (
    {/* pass the sdk object to DataProvider */}
    <DataProvider sdk={core40SDK}>
      {/* the value referenced by the `query` prop is
          unique to your looker instance. */}
      <Query query="evomfl66xHx1jZk2Hzvv1R"></Query>
    </DataProvider>
  )
}

3단계: Visualization 구성요소 추가

다음으로 Query에서 반환한 데이터와 구성 설정을 해석하여 예상 차트를 렌더링하는 Visualization 구성요소를 추가합니다.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return (
    <DataProvider sdk={core40SDK}>
      <Query query="evomfl66xHx1jZk2Hzvv1R">
        <Visualization />
      </Query>
    </DataProvider>
  )
}

이 단계에서는 다음 예시와 같은 시각화를 출력합니다.

선 그래프 시각화.

4단계: config 속성으로 설정 맞춤설정

Query 구성요소의 config 속성을 사용하여 SDK에서 반환된 시각화 설정을 재정의합니다. 이 속성은 시각화 유형부터 각 데이터 계열 렌더링 방식에 대한 세부정보까지 지원되는 모든 특성을 변경할 수 있습니다.

다음 샘플 코드에서 config 속성은 차트 유형을 sparkline으로 변경하고 데이터 계열에 새 색상을 할당합니다.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return (
    <DataProvider sdk={core40SDK}>
      <Query
        query={'evomfl66xHx1jZk2Hzvv1R'}
        config={{
          type: 'sparkline',
          series: [{ color: '#F4B400' }],
        }}
      >
        <Visualization />
      </Query>
    </DataProvider>
  )
}

이전 단계에서는 이 주황색 스파크라인을 렌더링합니다.

스파크라인 시각화

config 속성에서 사용할 수 있는 하위 속성의 전체 목록은 시각화 및 쿼리 속성 테이블 참조 문서를 참조하세요.

다음 단계